Media query of CSS

When we use a css file ,we have a link at the head of html:

<link type="text/css"  href="css/main.css" rel="stylesheet"></link>

 

then we can define the style of css  in main.css and use it.ya,here we use the default media value: media = "all".that means,the link is the same when we add media="all" in the link:

<link type="text/css" media="all" href="css/main.css" rel="stylesheet"></link>

 

here are media types we often refer is:

      aural,print,screen,braille,handheld,tty,tv,projection

U can have a try ,in the pc computer ,if we use media="screen" in the <link>,the css will be work,if you set the media ='print' or someelse,the main.css file will invalid.So when use the html in different media types , we can change the css style by not change anything.because we can define a css file for one type.

     And we also can use syntax like this:

   @media screen and width:1440 px {

          body { background:red }

  }

   @media screen and width:240 px {

          body { background:blue }

  }
  so when we open the html , in the pc, the backgroud will be red,but if we open it in ophone screen which width is 240px,the backgroud will be blue;

 

it is a good helper indeed.

at last ,give the link of offical documents, you can find detailed info there,good luck:

http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090423/