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/
页:
[1]