Css Media Types And css Media Queries

When there was only monitors are available then the task of web designer is very easy. But now days there are a lot of devices are available in the market. And each device has different screen size and resolution. And it is a difficult task for a web designer to make a website that will look perfect on each device.

Suppose I am making a site on my screen according to 1320 resolution and 1300px width and I found that the site look nice on my screen. But if someone open it on small screen then what happen? The entire site will collapse. There can be scrolling on page or the content will be overflowing from site. Then the site looks very bad and that will not good for a designer.

For this css has define media types and you can write different css for different screens sizes and resolution. You can define css media queries in your style sheet and write css for different screens. We will cover syntax and example of css media queries. And also cover all the media types available in css.

Types of css media

1. All: Used for all devices.
2. Aural: used for speech and sound devices.
3. Print: used for all printers.
4. Braille: Used for paged braille printers.
5. Handheld: used for small device or handy devices.
6. Projection: used for projectors.
7. Screen: used for computer screens.
8. Tv: used for television devices.
9. Tty: used teletypes and terminals

How to use css Media queries.

There are two ways to use css media queries.

One is make separate css file for each screen size and import file on the basis of size. In this css media query is written on the html page.

1. In the following example if anyone open website on the screen width between 650px and 899px then the mediumcss file will be included in the html page.

<link rel='stylesheet' media='screen and (min-width: 650px) 
and (max-width: 899px)' href='css/mediumcss.css' />

2. In the following example if anyone open website on a screen having width less than 649px then smallcss will be included in the page.

<link rel='stylesheet' media='screen 
and (max-width: 649px)' href='css/smallcss.css' />

3. In the following example if anyone open website on screen having width greater than 900px then largecss will be included in the page.

<link rel='stylesheet' media='screen 
and (min-width: 900px)' href='css/largecss.css' />

The second way is make a single file of css and write media queries in that css file and define css for different screen sizes.

When the browser width is less than 518px the following css will apply to the li under menubar class.

@media all and (max-width: 518px) {
     .menuBar ul l
      {
        Width:200px;
        Padding:10px;
        display:block
      }
}

When the browser width will be between 519px and 698px then the following css will apply to li under menubar class.

@media all and (min-width: 519px) and (max-width: 698px) {
     .menuBar ul l
      {
         Width:200px;
         Padding:5px;
         display:block
      }
}

Now when the browser width will be between 699px and 999px then the following css will apply to li under menubar class.

@media all and (min-width: 699px) and (max-width: 999px) {
     .menuBar ul l
      {
        Width:120px;
        Padding:5px;
        Float :left
     }
}

Until the width of browser is greater than 1000px the following css will apply to the li under menu bar

@media all and (min-width: 1000px) {
       .menuBar ul l
        {
          Width:120px;
          Padding:5px;
          float :left
          background-image:url(‘abc.png’);
        }
}

I have defined few example you can put any number of media queries in your css to make your site more attractive and size compatible. And also you can define different media types as I have used all media types. And also you can define orientation in media queries like

@media (orientation:portrait) { ... } 

References: http://www.w3.org/TR/css3-mediaqueries/
So this is all about media queries in css.