/* CSS3 media queries example file. For reference, have a look at - http://www.w3.org/TR/css3-mediaqueries/ - http://dev.w3.org/csswg/css3-mediaqueries/ - http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ - http://www.joepettersson.com/css3-media-queries-and-mobile-devices/ */ /* DEFINITIONS "A media query is a logical expression that is either true or false." "A media query consists of a media type and zero or more expressions that check for the conditions of particular media features." "Several media queries can be combined in a comma-separated list of media queries. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND. The logical NOT can be expressed through the ‘not’ keyword. The keyword ‘only’ can also be used to hide style sheets from older user agents." */ /* Examples 1: Using just the media type: */ @media screen { p { color:yellow; text-shadow: 1px 1px 2px #000; } } @media print { p { color:black !important; text-shadow: none !important; } } /* Examples 2: Using additional expressions for deteting different mobile devices */ /* This screen resolution applies to various smartphones */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* This is where your styles that apply to this device profile are placed */ .demoStyle {font-size: 1.2em;} } /* iPhone4 - This media-query uses a different targeting method that is iPhone 4 specific */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* This is where your styles that apply to this device profile are placed */ .demoStyle {font-size: 1.2em;} } /* iPad - In both orientations */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* This is where your styles that apply to this device profile are placed */ .demoStyle {font-size: 1.2em;} } /* iPads - In landscape orientation only (notice the 'orientation' query below) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* This is where your styles that apply to this device profile are placed */ .demoStyle {font-size: 1.2em;} } /* iPads - In portrait orientation only (notice the 'orientation' query below) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* This is where your styles that apply to this device profile are placed */ .demoStyle {font-size: 1.2em;} }