Mikel
来源： 根据浏览器屏幕分辨率不同使用不同的css样式——响应式 – 叫我小谷 – 博客园
根据浏览器屏幕分辨率不同使用不同的css样式
有两种方法实现：1、用css的@media（原生写法）；2、利用bootstrap的网格系统。（个人推荐用第二种方法。）
一、使用纯css实现
语法：@media only screen and (判断属性) {css样式}
理解：判断属性有：1、(min-width: 1200px)——不小于1200px；2、(max-width: 1200px)——不大于1200px；3、(min-width: 800px) and (max-width: 1200px)——不小于800px且不大于1200px。
下面写个简单的例子：
1、建一个class为content的div层，并引入css文件。
<head>
<meta charset=”UTF-8″>
<title>根据屏幕分辨率不同使用不同的css样式</title>
<link rel=”stylesheet” type=”text/css” href=”css/pingmu.css”/>
</head>
<body>
<div class=”content”>
<p>divcss3我这个层会根据浏览器屏幕分辨率不同显示不同的样式哦</p>
</div>
</body>
2、写css样式。
.content{
margin: 0px auto; /*使content层居中*/
}
@media only screen and (min-width: 1200px) {
/* 设置了浏览器宽度不小于1200px时，content显示1200px的宽度样式 */
.content{
width: 1200px;
height: 600px;
background-color: #369;
}
}
@media only screen and (min-width: 800px) and (max-width: 1199px) {
/* 设置了浏览器宽度不小于800px且不大于1199px时，content显示1000px的宽度样式 */
.content{
width: 1000px;
height: 600px;
border: solid 2px #F50000;
}
}
/**
* 注意分辨率区间的分配，如上面的1199px，若改为1200px，则在屏幕宽度位1200px时，content将运用两个样式。
*/
@media only screen and (min-width: 500px) and (max-width: 799px) {
/* 设置了浏览器宽度不小于500px且不大于799px时，content显示650px的宽度样式 */
.content{
width: 650px;
height: 600px;
color: #f50000;
background-color: #999;
}
}
@media only screen and (max-width: 499px) {
/* 设置了浏览器宽度不大于499px时，content显示200px的宽度样式 */
.content{
width: 200px;
height: 200px;
font-size: 15pt;
border: dashed 1px #666;
}
}
二、使用bootstrap（css框架）实现
例子如下：
<head>
<meta charset=”UTF-8″>
<!–移动端的响应式写法：加下面语句–>
<!–<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />–>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css” />
<style type=”text/css”>
.content {
margin: auto;
width: 1000px;
height: 600px;
background-color: #ccc;
}
/**
* .col-sm-6 就是当屏幕总宽度在750px~970px区间中时，把显示内容的框平均分为两列
* 此为bootstrap的网格系统。
*/
.col-sm-6{
height: 250px;
}
.c1{
background-color: #f50000;
}
.c2{
background-color: #333;
}
.c3{
background-color: #666;
}
.c4{
background-color: #aaa;
}
</style>
</head>
<body>
<div class=”content”>
<div class=”yiceng”>
<!–根据浏览器屏幕分辨率不同使用不同的css样式——bootstrap方法–>
<div class=”col-sm-6 col-md-3 c1″></div>
<div class=”col-sm-6 col-md-3 c2″></div>
<div class=”col-sm-6 col-md-3 c3″></div>
<div class=”col-sm-6 col-md-3 c4″></div>
</div>
</div>
</body>
bootstrap的网格系统理解：bootstrap把网页均分为12份，我们可以根据自己的需要自行分配每列内容显示所占的份额（如3列的分法有：1-9-1、2-8-2、3-6-3、4-4-4等）。此外，class前缀有四种：1、.col-xs-(代表：屏幕大小<=768px，此时可显示内容的最大区域自动)；2、.col-sm-(代表：768px<=屏幕大小<=992px，此时可显示内容的区域最大为750px)；3、.col-md-(代表：992px<=屏幕大小<=1200px,此时可显示内容的区域为970px)；4、.col-lg-(代表：屏幕大小>=1200px，此时可显示内容的区域最大为1170px)。四种网格系统可以联合使用。
三、移动端的响应式：
在<head>标签中导入bootstrap的css框架包，然后输入下面语句（语法结构如下）：
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />
理解：设置 meta 属性为 user-scalable=no 可以禁用移动端的缩放（zooming）功能；initial-scale——最初比例；minimum-scale——最小比例；maximum-scale——最大比例。此处时1：1：1，你也可以根据需要自行设置。
这样，在PC端设置的css样式在移动端也时一样的效果，不会因为移动端的屏幕变小而使内容缩小。
