Authors: Anjali Deshpande (Manager, Product UI Development) & Seema Hande (Lead Web Developer)

Anjali_Deshpande15Currently, Anjali is managing the UI development team and UI projects in India. She has over 15 years of experience in managing projects, people and clients. She has worked in the US as well as in India managing various critical projects and delivering them in time, within budget and with high quality. She is a PMI certified project manager and has initial experience as a software developer which makes her understand technologies very well while managing her projects and clients.

SeemaSeema is currently working as a Lead UI Development  for the past 2 years. She has over 6 years of experience in web development using cutting edge technologies. She is passionate about web development and has experience in developing eye catching web sites using latest technologies like HTML5 and CSS3. She is working on UI development projects and has worked on wide range of projects varying in domain and devices like Desktop, Mobile, and Tablet etc.

Introduction to CSS Media Queries

In today’s world, users view web pages on a wide range of screens. Screens can range from the large displays on their work stations, to their laptops on the air plane, to their iPad or other tablets while sitting in the park or home and finally on their small mobile phone screens on the go. This makes web development challenging and maintaining different versions of web site may become a nightmare.

Look at the picture below. It’s the same site viewed on different devices. Now the challenge is to achieve this in less efforts or maintaining different HTMLs for different devices.Clarice Technologies_CSS

CSS3 introduced media queries and made life easy for web developers. CSS is not just to style HTML page but can do many more things than that. Now with ‘media queries’ in CSS3, we are able to target specific screen sizes. With this developing and maintain web sites for different screen sizes has become achievable and easy. Media queries help developers take care of these parameters: specific devices, screen and page dimensions and orientations. Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user.

Clarice Technologies_CSS3

Different Styles for different Screens: How it Works?

You don’t have to learn lot many things to use media query. All it takes a few extra lines of code to take your web development to next level. The simplest way to use media queries is to below code in the same style sheet.

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
}   

Theoretically any attributes can be overwritten within this block of code to make to device specific. But in reality attributes like background color, border, etc remain same. Below are the attributes which get changed more often:

  • Width
  • Height
  • Float
  • Margins

For example, let’s consider that we are using a company logo on a page which is 600 pixel wide on the desktop version of the website. Now on a device with a width of 480 pixels, the scroller will appear which is not desirable. So we should have a smaller version of the logo and the CSS code would look like this:

#logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; }
@media only screen and (max-device-width: 480px) {
#logo { background: url(images/logo_mobile.png); width: 440px; }
}

If you see the code, the properties like border is not overwritten but it’s just the size which would change for the device with width 480px.

Linking to Different Stylesheets using Media Queries

Adding all the styles in the same CSS file is acceptable but not recommended as it will become a pain to manage the code. That is why the best practice is to link a new stylesheet for specific screen sizes. The way to do that is to use the media attribute of the link tag.

<!– This stylesheet is downloaded and rendered by all known browsers, including IE5,6,7 etc –>
<link rel=”stylesheet” type=”text/css” href=”example.css” media=”screen” />
<!– This stylesheet is downloaded and rendered by CSS media query capable browsers, due to the presence of “only” –>
<link rel=”stylesheet” type=”text/css” href=”example.css” media=”only screen” />
<!– This stylesheet is downloaded and rendered by CSS media query capable browsers, due to the presence of “and (min-width: 800px)” –>
<link rel=”stylesheet” type=”text/css” href=”example.css” media=”screen and (min-width: 800px)” />

Both the 2nd and 3rd style-sheets above are only downloaded by CSS media queries capable browsers, since the 2nd style-sheet contains the keyword “only”, and the 3rd the “and …”. With that said, be careful not to place general CSS rules that affect basic accessibility of your page inside @media rules that use media queries, as they will be ignored by browsers that don’t support media queries, potentially breaking the page for them. CSS media queries should be implemented just like any other progressive feature, on top of an existing foundation that has broader compatibility with browsers.

Width, Device-width and View-ports

It’s very important to know these terms to use media queries effectively. In case of desktops and laptop computers width and height refer to the size of the browser viewport, whereas device-width and device-height refer to the dimensions of the monitor. But it is not the same in case of mobile browsers. Most smartphones, including Android, iPhone, and Windows Phone 7, set width to a nominal viewport approximately 1,000 pixels wide (in an iPhone and iPod touch, it’s 980 pixels, Windows Phone 7 uses 1024 pixels).

Even though the style sheet attached to the page uses media queries to serve different styles depending on the values of min-width and max-width , the iPod touch ignores the styles and displays the desktop version because the viewport is considered to be 980 pixels wide. iPhone, iPod touch, and iPad don’t take orientation into account when calculating width, whereas other devices do. To solve this confusion thankfully, there’s a simple solution. Apple devised a new <meta> tag, which has been widely adopted by other mobile device manufacturers. You can define the width of viewport. If you don’t use width=device-width, on iOS your page stretches over the full available width of the layout viewport, which is 980px, if you use width=device-width, your page will fit into screen size of 320px.

In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1″>

This tells mobile devices to treat the viewport as being the same width as the physical width of the device. More to that, it tells the iPhone, iPod touch, and iPad to take orientation into account when calculating width. As a result, you can use width in media queries safely assuming that it means the available width in use.

Parameters for CSS Media Query

Min/Max Width:

This specifies the minimum and maximum width to be used.

/* Smartphones (landscape) ———– */
@media only screen and (min-width: 480px) {
/* droid,opera, etc. */
/* Styles */
.box { width:200px; height:200px; background:yellow; }
}

/* Smartphones (portrait) ———– */
@media only screen and (max-width: 320px) {
/* would target portrait for the droid, iphone 3, etc. */
/* Styles */
.box {width:200px; height:200px;background:red; }
}

Device-Pixel Ratio:

Device-pixel-ratio could help you know the resolution of the device screen, iPhone 4 and certain other smartphones have pixel ration equal or higher than 1.5, so if you want to target high resolution devices, you can use the media query below:

Targeting Apple mobile devices with high resolution displays (ie: iPhone4+ and iPad3+)

/* #### CSS for high resolution devices in general #### */
@media screen and (-webkit-min-device-pixel-ratio: 1.5){
  /* some css here */
}

/* #### CSS for small screen high resolution devices such as iPhone 4 #### */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px){
  /* some css here */
}

/* #### CSS for large screen high resolution devices such as iPad 3 #### */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px){
  /* some css here */
}

/* #### normal background served to browsers #### */
div#featuredbox{
  width: 90%;
  height: 400px;
  background: url(original_background.jpg) center center no-repeat;
}

/* #### CSS for retina devices with larger screens #### */
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px)
{
  div#featuredbox
{
background: url(highres_background.jpg) center center no-repeat; /* high res image that’s double the size resolution of the original’s */
-webkit-background-size: 50% auto; /* shrink image to 50% of its actual dimensions, matching that of the original image’s above */
}}

Orientation:

iPad introduced ‘orientation’ to help with detecting orientation change, below is how you can specify landscape and portrait style

/** iPad (landscape) **/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
/* Styles */
}

Conclusion

Media queries help build websites that adapt based on users resolution. Most modern browsers support media queries.

Untitled-2With media queries the web development becomes easier. Its easy to learn and apply and existing CSS can be modified to convert the website to shrink based on device width.

Look forward to your comments…

facebooktwittergoogle_plusredditlinkedinby feather

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>