Responsive Web Design – Part III

Step II in Responsive Web Design is the use of Media queries. Media queries are supported in Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, Chrome 5+, as well as most smartphones and touch-screen devices.

Media queries allow the web designers to create conditional stylesheets based on width, height, color, orientation, and many more. Media queries allow pages to use different CSS style rules based on the device displaying the website and they expand the role of the media attribute.

Setting conditions in media queries:

FeatureValueMin/Max   Description
widthLengthYesDisplay width
heightLengthYesDisplay height
device-widthLengthYesDevice width
device-heightLengthYesDevice height
orientationportrait or landscape  NoDevice orientation
aspect-ratioRatio (w/h)YesRatio of width to height
device-aspect-ratio Ratio (w/h)YesRatio of device-width to device-height
colorIntegerYesNumber of bits per color component
color-indexIntegerYesNumber of entries in the output device’s color lookup table
monochromeIntegerYesNumber of bits per pixel in the monochrome frame buffer
resolutionResolutionYesDensity of pixels of output device, (integer followed by dpi or dpcm)

 

Related Blogs

Web developer
Symfony-PHP-Developer_02
Quick question?