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

 

posted @ 2018-01-11 16:28  叫我小谷  阅读(209)  评论(0编辑  收藏