Media query of CSS

tanglei198577

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/