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
