FileNav

online
online: /HTML & CSS/CSS3_Media_Queries.md

CSS3 Media Queries

Media Query Support

Can I use CSS3 Media Queries

Feature Chrome Firefox IE Safari Opera
On Reload 4.0 3.5 9.0 3.1 9.5
Live Update 4.0 3.5 9.0 4.0 9.5
Feature Android Chrome for Android Firefox Mobile IE Mobile iOS Opera Mobile Opera Mini
On Reload 2.1 all all 10.0 3.2 10.0 5.0-7.0
Live Update 2.1 all all 10.0 3.2 10.0 5.0-7.0

Responsive Media Queries

@media only screen and (-webkit-min-device-pixel-ratio: 2),/* Webkit-based browsers */
       only screen and (min-resolution: 192dpi),           /* dppx fallback */ 
       only screen and (min-resolution: 2dppx) {           /* The standard way */
    /* Retina Styles */    
}


@media only screen and (min-width: 768px) and (max-width: 1024px)
 and (-webkit-min-device-pixel-ratio: 1) {
    /* iPad 1, 2, and mini */
}
@media only screen and (min-width: 768px) and (max-width: 1024px)
 and (-webkit-min-device-pixel-ratio: 2) {
    /* Retina iPad 3, Air, mini 2, etc. */
}

/**
 * Mobile Retina
 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (min-resolution: 192dpi),
 only screen and (min-resolution: 2dppx) {
    .thumb {
        width: 300px; /* 94% of page */
        width: 94%;
    }
}

/**
 * Tablet & Phablet Settings
 */
@media only screen and (min-width: 768px),
 only screen and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 3),
 only screen and (max-width: 640px) and (min-resolution: 288dpi),
 only screen and (max-width: 640px) and (min-resolution: 3dppx){
    .thumb.thumb-single,
    .thumb.thumb-tall {
        width: 334px;
        width: 49%;
    }

    .thumb + .thumb {
        margin-left: 20px;
        margin-left: 2%;
    }
}

Touch Media Queries

@media (-moz-touch-enabled){
    ...
}

Touch Pseudo-Classes

/* Firefox 3.6, Thunderbird 3.1, Fennec 1.0 */
html:-moz-system-metric(touch-enabled){
    font-size: calc( 1em * 1.2 );
    height: calc( 100% * 1.2);
    width: calc( 100% * 1.2);
}

iPhone, iPod Touch & iPad
-------------------------

~~~ css
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    .selector-01 { margin: 10px; }
    .selector-02 { margin: 10px; }
    .selector-03 { margin: 10px; }
}

Media Queries

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" />
<!--<![endif]-->

/*
 * http://www.webkit.org/blog/55/high-dpi-web-sites/
 */
<link rel="stylesheet" media="screen and min-device-pixel-ratio: 2" href="highres.css"/>