Today web is one of the fastest data media in the world. Everyday more than millions of people are searching various information in web. I can say web is the dictionary for information. Looking into this demand today web is not only available to computers but also you can access web from several devices. Technically speaking several devices means several resolutions. As an experienced UI developer you need to consider all those devices & their resolutions while design a web-page. I mean to say while the end-user will fetch your web-page from any device, your web-page must need to compatible for that resolution depending upon the devices. This is called Responsive web designing.
On the way of responsive web designing CSS3 introduced Media Queries. Those are very powerful to handle any resolution related CSS styles. Let’s talk about some standard devices before move into media queries.
Standard Devices
| Devices | Resolution (In Width) | Pixels Ratio |
|---|---|---|
| iPhones 4 & 4S | 320px – 420px | 2 |
| iPhones 5 & 5S | 320px – 568px | 2 |
| iPhones 6 | 375px – 667px | 2 |
| iPhones 6+ | 414px – 736px | 3 |
| Galaxy S3 | 320px – 640px | 2 |
| Galaxy S4 | 320px – 640px | 3 |
| HTC Phones | 360px – 640px | 3 |
| iPad mini | 768px – 1024px | 1 |
| iPad 1 & 2 | 768px – 1024px | 1 |
| iPad 3 & 4 | 768px – 1024px | 2 |
| Galaxy Tablets | 800px – 1280px | NA |
| Nexus Tablets | 601px – 906px | 1.332 |
| Kindle Fire HD 7″ | 800px – 1280px | 1.5 |
| Kindle Fire HD 8.9″ | 1200px – 1600px | 1.5 |
| Laptops | 1200px – 1600px | 1 & 2 |
| Apple Watch | 42mm – 38mm | NA |
| Moto 360 Watch | 218px – 281px | NA |
Now from the above list you can understood how resolution varies from device to device. To optimize our web for various resolutions let us discuss how media queries are helpful.
Introduction to CSS3 Media Queries
Media Queries are CSS3 techniques through which we can detect width, height, aspect ratio, color, orientation or media types of any device. It helps to separate specific device depended style blocks. Look at the example below.
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for Screen Resolution 768px to 1024px */
}
@media screen and (max-width: 600px) {
/* Styles for Screen Resolution up to 600px */
}
In this two block of code first block is for the screen resolution 768px to 1024px & the second one is for screen width 600px or less.
Syntax for CSS3 Media Queries
There are two ways to write media queries. One is “Embed CSS” & the other one is “Linked CSS”.
Embed CSS Syntax:
@media not|only mediatype and (media feature) {
/* Required Styles */
}
Linked CSS Syntax:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="deviceSpecific.css">
Using linked CSS you need to create separate style sheet files for respective devices. To refer those files you can use link tag with conditional media types & features.
Media Types
| Value | Description |
|---|---|
| All | Used for all media type devices. |
| Used for printers. | |
| screen | Used for computers, laptop, tablets, phones etc. |
Common used Media Features
| Value | Description |
|---|---|
| aspect-ratio | Aspect Ratio is nothing but the ratio between between width & height of the Screen. |
| color | Defines the number of bits per color component for the Screen. |
| width | Define the width of Screen. |
| height | Define the height of Screen. |
| max-width | Defines the maximum width of the Screen. |
| min-width | Defines the minimum width of the Screen. |
| max-height | Defines the maximum height of the Screen. |
| min-height | Defines the minimum height of the Screen. |
| resolution | Defines the resolution of device, using dpi or dpcm. |
| orientation | Defines whether the Screen is in landscape mode or in portrait mode. |
