Media queries are one of the most powerful additions into CSS. Media queries enable us to create the modern web we all are involve with. Some times you might need to create tweaks and improvements to a design that are targeted to specific devices. One of the best way to target devices is by defining a group of media query rules that would feature the capabilities of these devices.
Media queries mainly focus on features (and in future releases of CSS they will more exclusively focus on features). As such, it’s best to focus on features and capabilities of the device using the information available in media queries.
Device features media queries:
Let’s review the device based information we can collect:
|device-height||the actual height of device in pixels.|
|device-width||the actual width of the device in pixels.|
|device-aspect-ratio||the aspect ratio of the device. Example: 1/1 would be true if device is has a square screen. (Great to target widescreen)|
|device-pixel-ratio||Gives the number of device pixels per CSS pixel. currently this is not part of a standard and as such the browser prefix should be used as well.|
With the list above we can create media query combinations to create specific device rules.
Targeting Devices with media Queries:
Here is an example:
@media screen and (device-width: 360px) and (device-height: 640px) and (device-pixel-ratio: 3)
All that is left for you to do is cross reference with the device capabilities you want to target and implement the rule.
Please note that currently there is no standard when it comes to the “device-pixel-ratio” and although it is widely implemented it is not part of a standard. As such, include the browser extensions as needed to the specific device. Check out this list for the exact rule for your device.
Mobile Devices and the viewport:
There is a good chance that if your reading this article your planing on optimizing your site for mobile devices. A critical addition you must add into your HTML when working with responsive design is defining a viewport. In general, mobile devices tend to hard code a width to the browsers and scale down sizes. This solution was created to get sites that normally are designed for larger size screens to fit into the mobile view. With the help of viewports we can force the browser to render the screen the way we want it to. In short for every design you create add the following into the header of your HTML file:
<meta name="viewport" content="width=device-width">
References and further reading:
- What is responsive design?
- Mozilla CSS media Queries:
- Targeting Specific Devices:
- The viewport specification (draft):
- The viewport on Mozilla:
- The Mozilla orientation documentation:
- Techniques for graceful downgrading:
- HTML5Shiv for IE: