CSS3媒体查询 - 页面自适应

@media only screen and (max-width:1600px) {
    /* self style */
}
@media screen and (max-width: 1440px) {
    /* self style */
}
@media screen and (max-width: 1200px) {
    /* self style */
}

html {font-size:32px;}
body {width:100%; max-width:640px; background:#333; margin:0 auto;}
.nav li a {font-size: 0.75rem;}
.footer {height: 84px;}

@media screen and (max-width: 420px) {
    .footer {height: 52px;}
}

<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
html {font-size:62.5%;}
body {font:normal 100% Arial,sans-serif; font-size:1.4rem;}
img {max-width: 100%;}
</style>