What is Media Queries in CSS?
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
Laptops, Desktop
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ##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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ##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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ##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
Here is all device media queries in CSS.
Happy Coding..!
Was this article helpful?
YesNo
Percentage Difference Calculator using Jquery & PHP
thanks for the post