Media Queries Template for Browser Window Adjustments

Posted in Code Snippets

Media Queries Template for Browser Window Adjustments

CSS


/* 320px to 420px */

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


/* below 600px */

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


/* 600px to 799px */

@media screen and (max-width: 800px) and (min-width: 601px) {
}

/* 800px to 1024px */

@media screen and (max-width: 1024px) and (min-width: 801px) {
}


@media screen and (max-width: 1220px) and (min-width: 1025px) {
}

/* iPhone [portrait + landscape] */
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {

}

IE8 Stylesheet Call in Header (because respond.js breaks IE8, but fixes IE6 and IE7). Remember to create ie8.css stylesheet.

<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/ie8.css" />
<![endif]-->

IE8 Script Call in Footer (because respond.js breaks IE8, but fixes IE6 and IE7)

<!--[if !IE 8]>
<script type='text/javascript' src='http://emiliedances.com/wp-content/themes/thesis_18/custom/respond.min.js'></script>
<![endif]-->

Respond.js can be found here, on Scott’s awesome Github project.