Media queries are CSS expressions related to the display device that are evaluated by the browser. This is a new feature of CSS, which appeared in version CSS3. Media queries help developers and designers present the content or application data in a different way based on screen attributes.
Media queries can be defined using the @media CSS rule. This can appear in regular CSS files or used as an attribute when linking style sheets:
<!-- CSS media query for a stylesheet -->
<link rel="stylesheet" media="(max-width: 720px)" href="myApp.css" />
<!-- CSS media query defined in a css file -->
@media (max-width: 300px) {
.black {
color: #000;
}
}
We can define multiple style sheets inside an application, for desktop layouts, for smartphones and tablets, or for printing. The resolution and screen size of these devices will most probably differ, and the users interact with them in different ways, so the layout of the application should be different too.
When a webpage (or web application) is loaded, the browser evaluates the media queries and applies the one that results in a truthful way. (Please keep in mind that all the CSS files are downloaded when opening a website – the browser will decide based on media queries which will be applied.)
Common Features
Width and Height are the most widely used features of media queries. Using these, we define the rules when the style should be applied. For example, the following styles will be applied when the screen width is 700px and the height is 1500px.
@media (width: 700px) {...}
@media (height: 1500px) {...}
Orientation can have the values of landscape or portrait, this is a property of the viewport where the webpage is shown. The different rules can be combined using and, or, and not operators.
@media (width: 700px) and (orientation : portrait ){...}
Aspect ratio refers to the screen size ratio of the display showing the page, and is another feature that can be used with media queries. This can have values like: 4/3, 16/9, 185/100 or 239/100.
@media (height: 480px) and (aspect-ratio: 4/3 ){...}
The above css query would evaluate to true if the screen would be a classic TV device with a 640x480px resolution and a 4:3 screen ratio.
Another widely used option is the print type. This is used for documents shown on a screen in print preview mode. The following example would apply Georgia or Serif normal 12 point big fonts for paragraphs.
@media print {
p {
font-family: Georgia, Serif;
font-weight: normal;
font-size: 12pt;
}
}
For many devices like new smartphones, people are more familiar with resolution given in pixel density or dpi. In CSS3 (using media queries), we can now specify the dpi value for the screen and apply styling based on dpi value. This may be done if we want to load higher resolution images for higher resolution screens so the quality of the displayed image is more detailed.
@media print and (min-resolution: 300dpi ){
p {
font-family: monospace;
font-weight: bold;
font-size: 14pt;
}
#myImage: {
background-image: url(“images/highres/me.png”);
}
}
Almost all the media features can accept the min and max prefixes. For example, you can have min-width, max-height, min-aspect-ratio, max-resolution, and so on.
Using media queries can help designers and Web developers separate the user interface based on the device that uses their application. There are different points of view on how an application's UI should be constructed, like a mobile-first or desktop-first approach, but we can all agree that these days, designing responsive Web apps is (almost) a must.