Mobile Phone CSS media queries solved one of the biggest problems that emerged with the growth of mobile and other non-desktop related browsing capabilities. With a growing number of mediums to connect to the internet there needed to be a way to target these different mediums specifically. CSS media queries solved this by allowing you to identify the type of medium used as well as by allowing the targeting of physical attributes.

 

 

 

CSS media queries consist of two parts. They begin with a media type and end with the name of the feature and its value. The format is as follows

1
2
3
 @media type and (feature: value){  
  css here
 }

The browser checks both the media type and feature value and if both statements evaluate to true then it applies the styles within the @media declaration. So for example the following piece of code would check for a handheld device and if the width of the display area was less than 400px. If both of these statements evaluate true then it would then apply a green color to the body element.

1
2
3
4
5
@media handheld and (max-width: 400px ) {
  body {
  color: green;
  }
}

One of the most impressive features of media queries is that they actually allow you to check for multiple features and their corresponding values using the “and” keyword. So for example the following piece of code would check for a handheld device with a display area less than 400px, whose orientation is portrait

1
2
3
@media handheld and (max-width: 400px ) and (orientation: portrait){
 css here
}

Below is a list of of the different media types and all of the features along with their explanations

CSS Media types

all
aural
braille
embossed
handheld
print
prjection
screen
tty
tv

Features explanation

• width – width of display area
• height – height of display area
• device-width – widht of rendering surface
• device-height -height of rendering surface
• orientation – whether devices is currenly being viewed in Portrait or landscape
• aspect-ratio – ration of display areas width divided by height
• device-aspect-ratio ratio of rendering surfaces width devided by height
• color – number of bits per color componet
• color-index – number of entries in the color lookup table
• monochrome – number of bits per pixel in monochrome device
• resolution – tests density of pixels
• scan – for tv browsing tests whether the scanning is progressive or scan
• grid – tests whether their is a grid based display
• script – tests whether ECMAscript is supported
• pointer – queries presecnece and accuracy of a pointing device ( like a mouse)
• hover – determines whether th primary pointing device can hover
• luminosity – determines ambient luminosity

Using CSS Media Queries

CSS Media Queries are best used to fix elements that do not scale down well with your flexible grid. To take a more in depth look at when you could use CSS Media Queries look at the following code

1
2
3
4
 .page{
width: 80% ;
margin: 10px auto;
}

While the width of the page is still flexible and will change to occupy 80% of the display area you might want it to occupy the entire display area for mobile phones whose width is less than 500px. In order to do this you could add the following code.

1
2
3
4
5
@media handheld and (max-width: 500px ){
  .page{
  width: auto;
  }
}

Letting the page take up more space on mobile devices will allow you more room for already size constrained mobile devices. So now that you have seen a practical usage example of a css media query, let’s look at how you can implement them.

There are three different ways you can implement your CSS Media Queries. The first is directly into your stylesheet using a @media declaration, like the following.

1
2
3
4
5
@media screen and (max-width: 350px) {
  p {
  color: red;
  }
}

The second is by inserting them into a link element like the following

1
 			<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 350px)" />

Finally you attach them to an @import statement like the following

1
  @import url("mobile.css") screen and (max-width: 350px);

Which method you choose is entirely up to you, and all have some drawbacks and benefits.

CSS Media Queries Compatability

Surpisingly media queries has pretty strong support among modern browsers. Firefox 3.5 and above supports them, chrome 4 and above, safari 4 and above, Opera has since version 9.5 and even Internet explorer 9 and above has support. As for mobile browsers safari for IOS has had it since 3.2, opera mini since 5.0, Internet Explorer Mobile 10+, Firefox for android 24.0 + and chrome for android 29+.

Hopefully you came away with a better understanding of CSS media queries and how you can implement them to build a better mobile website experience.