根据浏览器屏幕分辨率不同使用不同的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样式在移动端也时一样的效果,不会因为移动端的屏幕变小而使内容缩小。