Responsive Web Design w3c
Media Queries
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.
Breakpoint
I suggest that you create breakpoints at the following stages
@media screen and (max-width:980px)
@media screen and (max-width:768px)
@media screen and (max-width:600px)
@media screen and (max-width:480px)
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">
You could also have import it into your exisiting style sheet
@import ulr(name.css) media (criteria)
or you can include one or a number of Media Queries within your main CSS which I think is better.
@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 480px a certain element is no longer displayed
@media screen and (max-width:480px) {
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
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
}
}
Height
Height of the rendering surface (eg: browser window on desktop or laptop)
min-height | max-height
@media (max-height : ?px) {
selector{ styles
}
}
Device-Height
Device-height: height of the output device (eg: handheld)
min-device-height | max-device-height
@media (max-device-height : ?px) {
selector{ styles
}
}
Aspect-Ratio
16/9 | 4/3 etc
min-aspect-ratio | max-aspect-ratio
@media (max-aspect-ratio : ?) {
selector{ styles
}
}
Device-Aspect-Ratio
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-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
}
}
Resolution
Describes the density of pixels on the device
min or max prefixes
can be dots per inch (dpi) or dots per centimeter (dpcm)
@media (min-resolution: 300dpi) {
selector{
styles
}
}
Scan
Television output devices
does not except min or max prefixes
Grid
Grid base devices are tty termin or phone display with only one fixed font the value will be 1. Otherwise, the value will be 0.