CSS3 Media Queries for Responsive Web Designing (RWD)

CSS3 Media Queries Tutorial for Responsive Design

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

DevicesResolution (In Width)Pixels Ratio
iPhones 4 & 4S320px – 420px2
iPhones 5 & 5S320px – 568px2
iPhones 6375px – 667px2
iPhones 6+414px – 736px3
Galaxy S3320px – 640px2
Galaxy S4320px – 640px3
HTC Phones360px – 640px3
iPad mini768px – 1024px1
iPad 1 & 2768px – 1024px1
iPad 3 & 4768px – 1024px2
Galaxy Tablets800px – 1280pxNA
Nexus Tablets601px – 906px1.332
Kindle Fire HD 7″800px – 1280px1.5
Kindle Fire HD 8.9″1200px – 1600px1.5
Laptops1200px – 1600px1 & 2
Apple Watch42mm – 38mmNA
Moto 360 Watch218px – 281pxNA

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

AllUsed for all media type devices.
printUsed for printers.
screenUsed for computers, laptop, tablets, phones etc.

Common used Media Features

aspect-ratioAspect Ratio is nothing but the ratio between between width & height of the Screen.
colorDefines the number of bits per color component for the Screen.
widthDefine the width of Screen.
heightDefine the height of Screen.
max-widthDefines the maximum width of the Screen.
min-widthDefines the minimum width of the Screen.
max-heightDefines the maximum height of the Screen.
min-heightDefines the minimum height of the Screen.
resolutionDefines the resolution of device, using dpi or dpcm.
orientationDefines whether the Screen is in landscape mode or in portrait mode.