How To HTML/CSS

Media Query CSS for Desktop, Tablet, Mobile

What is Media Queries?

Media queries are the CSS features used to develop responsive websites. Means media queries help to adapt web page content to different sizes according to screen resolutions. They are responsible for responsive web design and used to customize the web page design or web design for multiple resolution devices.

Media queries are included in HTML pages or written as an internal CSS on the same web page. Media queries CSS can also be included on a separate .CSS file. Here are we showing all devices media queries.

Media Queries For Different Resolution Devices

media queries in css

Laptops, Desktop


/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

//CSS

}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

//CSS

}

Tablets, Ipads (portrait)


/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

//CSS

}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

//CSS

}

Low Resolution Tablets, Mobiles (Landscape)


/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

//CSS

}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

//CSS

}

Use of Media Queries with Example

In media queries, min-width or max-width is the breaking point of the screen resolution. For example, when set the min-width at 360px, on that condition if you set CSS property change color to black on that point, it changes that. Checkout below code,
@media (min-width: 320px) and (max-width: 480px) {
p{
color:black;
}
}

On the above code, we set  (min-width: 320px) and (max-width: 480px), both are break point. On that point paragraph color change to BLACK

Also, Check: PHP EDITOR

Google Sheet Integration with WordPress without Plugin

Happy Coding..!

Leave a Reply

Your email address will not be published. Required fields are marked *