CSS兼容各个屏幕大小的写法

@media screen and (max-width: 1100px) {

//此处写最大屏幕是1100px的css

}

@media screen and (max-width: 978px) {

//此处写最大屏幕是978px的css

}

@media screen and (max-width: 978px) {

#footer{

font-size: 1.2em;

line-height: 2;

}

}

@media screen and (max-width: 780px) {

     #nav{

     font-size: 1.8em;

     }

}

@media screen and (max-width: 520px) {

     #nav{

     font-size: 1.6em;

     }

}

@media screen and (max-width: 500px) {

     #nav{

     font-size: 1.4em;

     }

}

@media all and (-webkit-min-device-pixel-ratio: 2) {

}

/* iPhone 4 */

@media screen and (max-device-width: 480px){

}

语法：

@media：<media_query_list>

<media_query_list>：[<media_query>[',' <media_query>]*]?

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：'('<media_feature>[:<value>]?')'

取值：

<media_type>：指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)<expression>：指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)