Wednesday, January 18, 2012
Responsive Web Design and using media queries
Taken mostly from an article found on reigndesign.com entitled
how-to-not-have-your-new-site-look-awful-on-phones. It used media queries to target multiple devices from smartphones to tablets to desktop. And even a special tag to target the kindle fire. I have rewritten all of the authors media queries with the more optimal way to use them in a webpage.
<link rel="stylesheet" href="css/globals.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/iefix.css" media="all" />
<![endif]-->
<link rel="stylesheet" href="css/3000.css?v=1" media="only screen and (max-width: 3000px)">
<link rel="stylesheet" href="css/1600.css?v=1" media="only screen and (max-width: 1600px)">
<link rel="stylesheet" href="css/1280.css?v=1" media="only screen and (max-width: 1280px)">
<link rel="stylesheet" href="css/1024.css?v=1" media="only screen and (max-width: 1024px)">
<link rel="stylesheet" href="css/800.css?v=1" media="only screen and (max-width: 800px)">
<link rel="stylesheet" href="css/480.css?v=1" media="only screen and (max-width: 480px)">
<link rel="stylesheet" href="css/320.css?v=1" media="only screen and (max-width: 320px)">
<!-- Special Style Sheet for special devices -->
<!-- iPads (landscape) -->
<link href="css/ipad-landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">
<!-- iPads (portrait) -->
<link href="css/ipad-portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)">
<!-- iPhone4 -->
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio: 1.5)">
<!-- Kindle Fire -->
<link href="css/kindle.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio : 1.5), and (min-device-width : 600px)">
<!-- Custom Icon for iPhones/iPads -->
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
Place the above inside the head tag. Also add the following meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
Posted by
robbiegod on 01/18 at 06:05 PM
HTML5 •
(0)
Comments •
(229)
Trackbacks •
Permalink