用媒体查询media根据屏幕分辨率大小确定网页宽度

　　显示网页的终端屏幕分辨率大小不一，为了能使同一网页能在不同的终端中合适显示，CSS3 推出了媒体查询media。用媒体查询media能根据屏幕分辨率大小确定网页宽度，这主要在 CSS 文件中根据屏幕分辨率大小定义网页宽度。

　　以前用百分比来根据屏幕分辨率大小确定网页宽度，但由于同样的百分比随着屏幕分辨率的增大，网页离屏幕两边的距离也随之变宽，不能很好的解决这个问题；用媒体查询media就能很好的解决这个问题。

　　用媒体查询media根据屏幕分辨率大小确定网页宽度实例：

　　主要举电脑屏幕的例子，因为手机屏幕太小，电脑屏幕显示的内容不能很好的显示于手机，需要减掉一部分内容的，不然内容显得太多拖着屏幕太长。当前电脑屏幕分辨率宽度主要有这么几类：1024 以下的、1024 - 1280、1280 - 1440、1440 - 1920、1920 - 2560、2560 - 3328、3328 以上的，下面分别定义适合这些宽度的 CSS（在 CSS 文件中定义）：

　　网页主要 html 代码：

　　 <div class="page">
　　 　　 <div class="header"></div>
　　 　　 <div class="content"></div>
　　 　　 <div class="footer"></div>
　　</div>

　　CSS样式：

　　@media screen and (max-width:1024px) {.page{width:980px;}}
　　@media screen and (min-width:1025px) and (max-width:1280px) {.page{width:90%;}}
　　@media screen and (min-width:1281px) and (max-width:1440px) {.page {width:92%;}}
　　@media screen and (min-width:1441px) and (max-width:1920px) {.page{width:94%;}}
　　@media screen and (min-width:1921px) and (max-width:2560px) {.page {width:96%;}}
　　@media screen and (min-width:2561px) and (max-width:3328px) {.page {width:97%;}}
　　@media screen and (min-width:3329px) {.page {width:98%;}}

　　定义网页宽度时可用具体数字和百分比。一般来说，屏幕分辨率之间的范围比较小适合用具体数字，屏幕分辨率之间的范围比较大适合用百分比。