响应式布局 | 易学教程

响应式布局
就是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本，如PC,手机,平板。

优点：
1.面对不同的分辨率设备灵活性强
2.能够快速的解决多设备显示的适应问题
3.适合中小型网站

缺点：
1.兼容于各种设备工作量大，效率降低
2.代码累赘，以及加载事件过长

原理：
通过C3的媒体查询来定制某个宽度区间的网页布局

媒体查询：能检测我们设备的宽度，通过不同的宽度显示不同的样式

超小屏幕（移动设备） 768px以下
小屏幕（版本设备） 769px-992px
中屏设备（标屏设备） 992px-1200px
大屏屏幕（宽屏电脑）1200px以上

语法：
@media 媒体类型关键字媒体特性（即媒体条件） {样式代码}

@media screen and (min-width:768px) and (max-width:992px){
        //屏幕满足769-992px之间时的样式设置，注意：and后必须有空格}

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background-color: #ccc;
            transition: all 1s;
        }
      /*@media screen and (max-width: 768px){
            .content{
                width: 100%;
                background-color: pink;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            .content{
                width: 750px;
                background-color: cyan;
            }
        }

        @media screen and (min-width: 992px) and (max-width: 1200px){
            .content{
                width: 970px;
                background-color: orange;
            }
        }
        @media screen and (min-width: 1200px){
            .content{
                width: 1170px;
                background-color: green;
            }
        }*/
        /*媒体查询的原理：就和样式覆盖的原理一样，当条件条件成立时执行*/
        /*可简写为*/
		//768px以下显示conten的背景 background-color: #ccc;
        @media screen and (min-width: 768px) {
            /*平板*/
            .content{
                width: 750px;
                background-color: cyan;
            }
        }

        @media screen and (min-width: 992px){
            /*标屏*/
            .content{
                width: 970px;
                background-color: orange;
            }
        }
        @media screen and (min-width: 1200px){
            /*宽屏*/
            .content{
                width: 1170px;
                background-color: green;
            }
        }

    </style>
</head>
<body>
<div class="content"></div>
</body>
</html>

来源：https://blog.csdn.net/qq_38105960/article/details/100897847

标签

响应式布局

电脑