Media Queries
Internet is becoming ubiquitous and is now available in devices of all forms & shapes. A standard website built for a resolution more commonly found in a desktop computer might not look great when accessed from a mobile device like smart phone, tablet or even a netbook. It will be tedious and time consuming to build a new site for each & every type of device. Most simple solution is to use Media queries to change the look & feel of the same website based on the resolution of the device used to access the site – like changing a three column layout in desktop to a two column layout in a tablet.
What is Media Queries?
Media query is a W3C recommendation which involves using the CSS media type and an expression to check the condition of the media feature like device-width, device-height, orientation etc. E.g. -
<link type="text/css" media="screen and max-device-width:320px" href="smartphone.css" />
The above statement will check the width of the device from which you are accessing this code and if it is less than or equal to 320px, then it will download the smartphone.css style sheet.
A Media query is a simple CSS manipulation and does not require any external files or libraries.
How to use Media Queries?
Since the idea is to manipulate the styles associated with the web page, you could use Media Queries to link to different style sheets based on conditions or use these conditions inside a single style sheet.
e.g.
OPTION 1 - Using different style sheets for different devices.
<link type="text/css" media="screen and (min-device-width:0px) and (max-device-width:320px)" href="smartphone.css" />
<link type="text/css" media="screen and (min-device-width:321px) and (max-device-width:768px)" href="tablet.css" />
<link type="text/css" media="screen and (min-device-width:769px) and (max-device-width:1280px)" href="netbook.css" />
<link type="text/css" media="screen and (min-device-width:1281px) and (max-device-width:1920px)" href="desktop.css" />
OPTION 2 - Using single style sheet but different sections based on the device.
@media and (min-device-width:0px) and (max-device-width:320px)
{
body
{
font-family : arial;
font-size : 8px;
}
}
@media and (min-device-width:321px) and (max-device-width:768px)
{
body
{
font-family : verdana;
font-size : 10px;
}
}
Browser Support
Most of the major browsers like Firefox, Chrome, Safari etc. have been supporting media queries for a while. Internet Explorer supports media queries from IE 9+.
More Information about Media Queries - http://www.w3.org/TR/css3-mediaqueries/
posted by Shanmuganathan Sivaraj at
9:15 PM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]