一、据统计，大致共有如何几种分辨率：
1920*1080
1680*1050
1600*1200/900
1440*900
1400*1050/900
1366*768
1360*1024/768
1280*1024/960/768/720/800/600
1024*768
使用CSS单词与语法
代码如下:
@media screen and (判断属性){ CSS样式选择器 }
这里注意花括号里装要变化CSS样式选择器。
需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>
两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
< link rel ="stylesheet" type ="text/css" href ="styleA.css" media ="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候，应用styleA.css
在media属性里：
< link rel ="stylesheet" type ="text/css" href ="styleB.css" media ="screen and (min-width: 600px) and (max-width: 800px)" >
意思是当屏幕的宽度大于600小于800时，应用styleB.css
其它属性可看这里：http://www.swordair.com/blog/2010/08/431/
另一种方式，即是直接写在标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ .class { background : #ccc ; } }
写法是前面加@media，其它跟link里的media属性相同
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。