html 怎么做到大小屏兼容,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：

：[[',' ]*]?

：[only | not]?  [and ]*

|  [and ]*

：'('[:]?')'

取值：

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