根据浏览器屏幕分辨率不同使用不同的css样式——响应式 – 叫我小谷 – 博客园 -Mikel

根据浏览器屏幕分辨率不同使用不同的css样式——响应式 – 叫我小谷 – 博客园

2020年2月3日 分类: JavaScript

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


标签:
本文的评论功能被关闭了.
备案信息冀ICP 0007948