Edge Code Technology: Responsive Design: media queries

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head> tag.

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

Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE.

<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Now we can add exta rules in CSS to specific resolutions. A basic media queie would something like this:

I will also be making an extensive guide on how to use media queries to do various layouts. Stay tooned.

References: webdesignerwall.com

Pages

Wednesday, July 18, 2012

Responsive Design: media queries

No comments:

Post a Comment