CSS3 Media Queries for responsive web designing

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 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 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.
print 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.