Responsive Web Design
(w3c)


Media Queries - Part Two


You are probably familiar with Media Types, which allowed for separate CSS for various media including a Media Type for Handheld. Media Types did not seem to catch on for cell-phones, and were not even supported on some. With CSS3 we have Media Queries, which goes one step further, and are supported on all current browsers (March 26, 2011). The Media Type information can still be included within the Media Query.

Media Queries can be used to insure that your site will work correctly regardless of the user's screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, ipad, cell phone etc.

CSS


From your web site you can link to a specific css that just contains the Media Queries for a specific criteria:

<link media="only screen and (CRITERIA GOES HERE)" href="mediaQueries.css" type="text/css" rel="stylesheet">


or you can include one or a number of Media Queries within your main CSS.

@media (criteria) {
selector{ styles
}
}


You can state for all media (which is actually the Media Type included in the Media Query) but the result is the same as the one above

@media all and(criteria) {
selector{
styles
}
}



With the example below the screen is the Media Type and the width is the media property.
The directive is that when the window is 420px a certain element is no longer displayed

@media screen and (max-width:420px) {
selector{
display:none;
}


Media Queries allow you to detect the type of device etc. based on the following criteria

Width


Width of the rendering surface (eg: browser window on desktop or labtop)
min-height | max-height

@media (max-width : ?px) {
selector{ styles
}
}


Device-width: width of the output device (eg: browser window on mobile device)
min-device-width | max-device-width



@media (max-device-width : ?px) {
selector{ styles
}
}


The criteria for the example, which is contained in the CSS is as follows

@media only screen and (max-width : 800px) {
#container{
column-count: 2;


}
}

&
@media only screen and (device-max-width : 480px) {
#container{
column-count: 2;


}
Plus repositioning various elements in the banner
and font sizes
}

Other Demo/Example Media Queries & Breakdown of CSS

Because the above example contains multi columns, it is easy to implement. This example is a bit more complex the details are included on the page.

Height


Device-height: height of the output device (eg: handheld)
min-device-height | max-device-height



@media (max-device-height : ?px) {
selector{ styles
}
}



Height of the rendering surface (eg: browser window on desktop or laptop)
min-height | max-height




@media (max-height : ?px) {
selector{ styles
}
}


Aspect-Ratio


16/9 | 4/3 etc
min-aspect-ratio | max-aspect-ratio



@media (max-aspect-ratio : ?) {
selector{ styles
}
}


min-device-aspect-ratio | max-device-aspect-ratio

@media (max-device-aspect-ratio : ?) {
selector{ styles
}
}


Color


min-color | max-color (bit depth of the device)
min-color | max-color


@media (max-color : ?) {
selector{ styles
}
}

color-index : color device with at least 256 colors
min-color-index | max-color-index


@media (max-color-index: ?) {
selector{ styles
}
}


Monochrome


Monochrom : describes the number of bits per pixel
min-monochrome | monochrome

@media ( monochrome : ?) {
selector{ styles
}
}

Orientation


portrait | landscape



@media (orientation: portrait) {

selector{ styles
}
}


Example of Web Page Using Media Queries (and descriptions of MQ)
Example Showing CSS Columns and Media Queries

Showcase: Responsive Design Websites

code

color

CSS

design

type

writing

info arch

the net

php

seo

user

usabilty


be inspired


my notes