Today Lunch & Learn session is all about Media Query & how it helps create responsive designs. Vijay, our design expert walked us through the topic today. Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. (e.g. smartphone screen vs. computer screen). Media query is a CSS technique introduced in CSS3. It became a W3C recommended standard in June 2012.

More on Media Query CSS3

You should include the following <meta> viewport element in all your web pages.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

The width=device-width part sets the width of the page to follow the screen-width of the device.

 A major component of responsive design is creating the right experience for the right device. Normally we have 3 types of devices viz, Mobile Phones, Tablets and Laptop / PC. Below are the codes to be implemented to make responsive designs.


/* Smartphones (portrait and landscape) */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {  }

/* Smartphones (landscape)  */

@media only screen and (min-width : 321px) {  }

/* Smartphones (portrait)  */

@media only screen and (max-width : 320px) {  }


/* iPads (portrait and landscape) */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  }

/* iPads (landscape) */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  }

/* iPads (portrait) */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  }

Laptop & PCs

@media only screen and (min-device-width : 1024px) {  }

With W3C recommendations for Media Query, now most of the browsers offer support with Chrome offering the highest compatibility. To learn more about Media Query, please check this resource.

A click before the start of our the session today!

Friday Sessions- Vijaya Kumar