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.
<!-- desktop styles -->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<!-- smartphones (landscape) -->
<link href="css/mobile-landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px)">
<!-- smartphones (portrait) -->
<link href="css/mobile-portrait.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)">
<!-- 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">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
Posted by .(JavaScript must be enabled to view this email address) on 01/18 at 06:05 PM