Why CSS Media Queries
CSS media queries used to assign different sets of style depending on browser window size. It is very useful when we create websites or applications which should be compatible on different platforms and devices with different resolutions. CSS Media queries allow you to target different devices with respect to screen size, device-orientation or display-density. This means, you can use CSS Media Queries to tweak a CSS for an iPad, iPhone, Android, Black Berry, printer or create a responsive site.
The number of smartphone users increasing and smartphones are used for accessing websites. Similarly, the number of devices with different resolutions also increased. Thousands of variety mobiles are available in the market today. In this scenario, it is very crucial for all the websites to be mobile friendly. From April 2015, Google has considered “Mobile friendliness” as a criteria for website to list in the search results. Now you might have understood the importance of CSS Media Queries in web/UI development.
What is CSS Media Queries?
Media Queries consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running and all expressions in the Media Queries are true.
The CSS Media Queries syntax
@media screen and (min-width: 320px) and (max-width: 480px) { .header { width: 100%; } }
Given is the syntax for CSS media queries. Here I have used the min-width and max-width properties of css to target small devices. Same way we can target different devices with different resolutions.
CSS Media Queries on a link element
How to use CSS media queries on a link tag in html? When we want to call a style sheet for a particular resolution device, we can media queries in link tag to call that style sheet. The following code is an example.
<link rel="stylesheet" media="(max-width: 640px)" href="example.css"/>
How to use CSS Media Queries within a style tag
<style> @media screen and(max-width: 600px) { .my_widget { display: none; } } </style>
Dimension in CSS Media Queries
We’ll get width and height, which query against the current browser window height and width. When we target devices, there is device-width and device-height, which also provide min-device-width, max-device-width, min-device-height, and max-device-height. Following example shows how to use device-width and device-height for targeting devices.
@media screen and (min-device-width: 320px) and (max-device-width: 640px) { /*Styles go here */ }
Orientation in CSS Media Queries
We have already seen min-width, max-width, min-device-width and max-device-width in CSS media queries. As we no, sometimes we will have to add some special css when the application is in either portrait or landscape modes. Now we will see how to use media queries based on the device orientations.
@media screen and (min-device-width: 320px) and (max-device-width: 640px) and (orientation:portrait) { /*Portrait mode Styles go here */ } @media screen and (min-device-width: 320px) and (max-device-width: 640px) and (orientation:landscape) { /*Portrait mode Styles go here */ }
Aspect ratio in CSS Media Queries
The aspect ratio or device aspect ratio is the ratio of the width to the height. Aspect ratio is the ratio between a shape’s sizes in different dimensions. In this case, that shape is either our screen, or window.
Aspect ratios are represented by two numbers delineated by a /, such as 4/3. The first number represents the horizontal ratio, the second the vertical ratio. Following is the example.
@media only screen and (device-aspect-ratio: 16/9) { /*Styles go here */ }
Pixel ratio in CSS Media Queries
When we want to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet’s Retina display, we can use the following media queries.
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
The device-pixel-ratio for the 3rd and 4th generation Retina iPads is 2. If we want to target iPad 1 & 2, we can use the following css media queries.
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
You must have noticed, that the pixel ratio is ‘1’ for the iPad 1 & 2. Read more about iPad Media Queries