More on Media Query CSS3

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

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

/* 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

/* 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!

The post Friday Learning – Media Query in CSS3 appeared first on Hubfly.