移动端Web开发（二）响应式布局

最新推荐文章于 2024-07-24 22:55:41 发布
最新推荐文章于 2024-07-24 22:55:41 发布
阅读量610 收藏
点赞数
分类专栏： 前端 移动端 文章标签： css html 栅格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18404993/article/details/108337473
版权

文章目录

1、什么是响应式布局

一个网站兼容多种终端，而不是为多个终端分别开发多个版本。
对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式。

2、响应式布局的原理

关键点：如何响应不同的屏幕尺寸——媒体查询
在这里插入图片描述
在不同的断点下写不同的样式

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*sm*/
@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}
/*md*/
@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}
/*lg*/
@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}
/*xl*/
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

3、栅格系统

栅格系统是响应式布局的一种实现方式。
在这里插入图片描述

3.1 栅格系统原理

栅格系统将空间氛围行和列，其中一行被分为12列，通过调整元素所占的列数来调整布局。
在有限考虑最小屏的基础上，为各种屏幕大小分布指定不同的样式类。

.col-1 {
    width: 8.33333333%;
}
.col-2 {
    width: 16.66666667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-5 {
    width: 41.66666667%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33333333%;
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33333333%;
}
.col-11 {
    width: 91.66666667%;
}
.col-12 {
    width: 100%;
}

.col-n(数字)：表示最小屏下，占n格的元素，例如col-1为最小屏下占1格的元素（1/12=8.33333333%）
.con-md-n：表示中屏下，占n格的元素。
通过指定.row类来包含一行的元素，这一行的元素宽度共占12格。

例如：

<div class="row">
	<div class="col-12"></div>
	<div class="col-12"></div>
	<div class="col-12"></div>
</div>

通过为同一个元素设置在不同屏幕大小下激活的样式类，来动态地改变网页布局。例如：

<div class="row">
	<div class="col-12 col-md-4"></div>
	<div class="col-12 col-md-4"></div>
	<div class="col-12 col-md-4"></div>
</div>

上面的设置制定了，三个div元素在最小屏状态下分别独占一行，在中屏及以上状态下，三个div共占同一行。

3.2 偏移

栅格系统通过定义了一系列带有offset字符的样式类来实现偏移（向右偏移），实现偏移的原理是使用左侧外边距（margin-left）


    .col-sm-offset-12 {
        margin-left: 100%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0 {
        margin-left: 0;
    }

3.3 Push和Pull

通过push和pull 可以让元素左移或右移若干个单位，实现原理为相对定位中的right和left
push 向左推
pull 向右拉

.col-sm-pull-12 {
        right: 100%;
    }
    .col-sm-pull-11 {
        right: 91.66666667%;
    }
    .col-sm-pull-10 {
        right: 83.33333333%;
    }
    .col-sm-pull-9 {
        right: 75%;
    }
    .col-sm-pull-8 {
        right: 66.66666667%;
    }
    .col-sm-pull-7 {
        right: 58.33333333%;
    }
    .col-sm-pull-6 {
        right: 50%;
    }
    .col-sm-pull-5 {
        right: 41.66666667%;
    }
    .col-sm-pull-4 {
        right: 33.33333333%;
    }
    .col-sm-pull-3 {
        right: 25%;
    }
    .col-sm-pull-2 {
        right: 16.66666667%;
    }
    .col-sm-pull-1 {
        right: 8.33333333%;
    }
    .col-sm-pull-0 {
        right: auto;
    }
    .col-sm-push-12 {
        left: 100%;
    }
    .col-sm-push-11 {
        left: 91.66666667%;
    }
    .col-sm-push-10 {
        left: 83.33333333%;
    }
    .col-sm-push-9 {
        left: 75%;
    }
    .col-sm-push-8 {
        left: 66.66666667%;
    }
    .col-sm-push-7 {
        left: 58.33333333%;
    }
    .col-sm-push-6 {
        left: 50%;
    }
    .col-sm-push-5 {
        left: 41.66666667%;
    }
    .col-sm-push-4 {
        left: 33.33333333%;
    }
    .col-sm-push-3 {
        left: 25%;
    }
    .col-sm-push-2 {
        left: 16.66666667%;
    }
    .col-sm-push-1 {
        left: 8.33333333%;
    }
    .col-sm-push-0 {
        left: auto;
    }

3.4 隐藏和显示

通过指定元素在不同屏幕大小下的的done和block类，可以控制元素的隐藏和显示，其实现原理为display属性。

.d-none {
    display: none !important;
}
.d-block {
    display: block !important;
}

3.5 清除浮动

由于上述的栅格系统实现中使用了浮动，故需要清除浮动。

.clearfix:after,
.clearfix:before,
.container:after,
.container:before,
.row:after,
.row:before {
    display: table;
    content: ' ';
}
.clearfix:after,
.container:after,
.row:after {
    clear: both;
}

3.6 完整的栅格系统实现

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*sm*/
@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}
/*md*/
@media (min-width: 768px) {
    .container {
        width: 720px;
    }
}
/*lg*/
@media (min-width: 992px) {
    .container {
        width: 960px;
    }
}
/*xl*/
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}
.col-1 {
    width: 8.33333333%;
}
.col-2 {
    width: 16.66666667%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33333333%;
}
.col-5 {
    width: 41.66666667%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33333333%;
}
.col-8 {
    width: 66.66666667%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33333333%;
}
.col-11 {
    width: 91.66666667%;
}
.col-12 {
    width: 100%;
}

.col-offset-12 {
    margin-left: 100%;
}
.col-offset-11 {
    margin-left: 91.66666667%;
}
.col-offset-10 {
    margin-left: 83.33333333%;
}
.col-offset-9 {
    margin-left: 75%;
}
.col-offset-8 {
    margin-left: 66.66666667%;
}
.col-offset-7 {
    margin-left: 58.33333333%;
}
.col-offset-6 {
    margin-left: 50%;
}
.col-offset-5 {
    margin-left: 41.66666667%;
}
.col-offset-4 {
    margin-left: 33.33333333%;
}
.col-offset-3 {
    margin-left: 25%;
}
.col-offset-2 {
    margin-left: 16.66666667%;
}
.col-offset-1 {
    margin-left: 8.33333333%;
}
.col-offset-0 {
    margin-left: 0;
}

.col-pull-12 {
    right: 100%;
}
.col-pull-11 {
    right: 91.66666667%;
}
.col-pull-10 {
    right: 83.33333333%;
}
.col-pull-9 {
    right: 75%;
}
.col-pull-8 {
    right: 66.66666667%;
}
.col-pull-7 {
    right: 58.33333333%;
}
.col-pull-6 {
    right: 50%;
}
.col-pull-5 {
    right: 41.66666667%;
}
.col-pull-4 {
    right: 33.33333333%;
}
.col-pull-3 {
    right: 25%;
}
.col-pull-2 {
    right: 16.66666667%;
}
.col-pull-1 {
    right: 8.33333333%;
}
.col-pull-0 {
    right: auto;
}
.col-push-12 {
    left: 100%;
}
.col-push-11 {
    left: 91.66666667%;
}
.col-push-10 {
    left: 83.33333333%;
}
.col-push-9 {
    left: 75%;
}
.col-push-8 {
    left: 66.66666667%;
}
.col-push-7 {
    left: 58.33333333%;
}
.col-push-6 {
    left: 50%;
}
.col-push-5 {
    left: 41.66666667%;
}
.col-push-4 {
    left: 33.33333333%;
}
.col-push-3 {
    left: 25%;
}
.col-push-2 {
    left: 16.66666667%;
}
.col-push-1 {
    left: 8.33333333%;
}
.col-push-0 {
    left: auto;
}

/*sm*/
@media (min-width: 576px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33333333%;
    }
    .col-sm-5 {
        width: 41.66666667%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33333333%;
    }
    .col-sm-8 {
        width: 66.66666667%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33333333%;
    }
    .col-sm-11 {
        width: 91.66666667%;
    }
    .col-sm-12 {
        width: 100%;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0 {
        margin-left: 0;
    }

    .col-sm-pull-12 {
        right: 100%;
    }
    .col-sm-pull-11 {
        right: 91.66666667%;
    }
    .col-sm-pull-10 {
        right: 83.33333333%;
    }
    .col-sm-pull-9 {
        right: 75%;
    }
    .col-sm-pull-8 {
        right: 66.66666667%;
    }
    .col-sm-pull-7 {
        right: 58.33333333%;
    }
    .col-sm-pull-6 {
        right: 50%;
    }
    .col-sm-pull-5 {
        right: 41.66666667%;
    }
    .col-sm-pull-4 {
        right: 33.33333333%;
    }
    .col-sm-pull-3 {
        right: 25%;
    }
    .col-sm-pull-2 {
        right: 16.66666667%;
    }
    .col-sm-pull-1 {
        right: 8.33333333%;
    }
    .col-sm-pull-0 {
        right: auto;
    }
    .col-sm-push-12 {
        left: 100%;
    }
    .col-sm-push-11 {
        left: 91.66666667%;
    }
    .col-sm-push-10 {
        left: 83.33333333%;
    }
    .col-sm-push-9 {
        left: 75%;
    }
    .col-sm-push-8 {
        left: 66.66666667%;
    }
    .col-sm-push-7 {
        left: 58.33333333%;
    }
    .col-sm-push-6 {
        left: 50%;
    }
    .col-sm-push-5 {
        left: 41.66666667%;
    }
    .col-sm-push-4 {
        left: 33.33333333%;
    }
    .col-sm-push-3 {
        left: 25%;
    }
    .col-sm-push-2 {
        left: 16.66666667%;
    }
    .col-sm-push-1 {
        left: 8.33333333%;
    }
    .col-sm-push-0 {
        left: auto;
    }
}
/*md*/
@media (min-width: 768px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-md-12 {
        width: 100%;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-md-offset-9 {
        margin-left: 75%;
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-md-offset-6 {
        margin-left: 50%;
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-md-offset-3 {
        margin-left: 25%;
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-md-offset-0 {
        margin-left: 0;
    }

    .col-md-pull-12 {
        right: 100%;
    }
    .col-md-pull-11 {
        right: 91.66666667%;
    }
    .col-md-pull-10 {
        right: 83.33333333%;
    }
    .col-md-pull-9 {
        right: 75%;
    }
    .col-md-pull-8 {
        right: 66.66666667%;
    }
    .col-md-pull-7 {
        right: 58.33333333%;
    }
    .col-md-pull-6 {
        right: 50%;
    }
    .col-md-pull-5 {
        right: 41.66666667%;
    }
    .col-md-pull-4 {
        right: 33.33333333%;
    }
    .col-md-pull-3 {
        right: 25%;
    }
    .col-md-pull-2 {
        right: 16.66666667%;
    }
    .col-md-pull-1 {
        right: 8.33333333%;
    }
    .col-md-pull-0 {
        right: auto;
    }
    .col-md-push-12 {
        left: 100%;
    }
    .col-md-push-11 {
        left: 91.66666667%;
    }
    .col-md-push-10 {
        left: 83.33333333%;
    }
    .col-md-push-9 {
        left: 75%;
    }
    .col-md-push-8 {
        left: 66.66666667%;
    }
    .col-md-push-7 {
        left: 58.33333333%;
    }
    .col-md-push-6 {
        left: 50%;
    }
    .col-md-push-5 {
        left: 41.66666667%;
    }
    .col-md-push-4 {
        left: 33.33333333%;
    }
    .col-md-push-3 {
        left: 25%;
    }
    .col-md-push-2 {
        left: 16.66666667%;
    }
    .col-md-push-1 {
        left: 8.33333333%;
    }
    .col-md-push-0 {
        left: auto;
    }
}
/*lg*/
@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33333333%;
    }
    .col-lg-5 {
        width: 41.66666667%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33333333%;
    }
    .col-lg-8 {
        width: 66.66666667%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33333333%;
    }
    .col-lg-11 {
        width: 91.66666667%;
    }
    .col-lg-12 {
        width: 100%;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }
    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-lg-offset-9 {
        margin-left: 75%;
    }
    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-lg-offset-6 {
        margin-left: 50%;
    }
    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-lg-offset-3 {
        margin-left: 25%;
    }
    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-lg-offset-0 {
        margin-left: 0;
    }

    .col-lg-pull-12 {
        right: 100%;
    }
    .col-lg-pull-11 {
        right: 91.66666667%;
    }
    .col-lg-pull-10 {
        right: 83.33333333%;
    }
    .col-lg-pull-9 {
        right: 75%;
    }
    .col-lg-pull-8 {
        right: 66.66666667%;
    }
    .col-lg-pull-7 {
        right: 58.33333333%;
    }
    .col-lg-pull-6 {
        right: 50%;
    }
    .col-lg-pull-5 {
        right: 41.66666667%;
    }
    .col-lg-pull-4 {
        right: 33.33333333%;
    }
    .col-lg-pull-3 {
        right: 25%;
    }
    .col-lg-pull-2 {
        right: 16.66666667%;
    }
    .col-lg-pull-1 {
        right: 8.33333333%;
    }
    .col-lg-pull-0 {
        right: auto;
    }
    .col-lg-push-12 {
        left: 100%;
    }
    .col-lg-push-11 {
        left: 91.66666667%;
    }
    .col-lg-push-10 {
        left: 83.33333333%;
    }
    .col-lg-push-9 {
        left: 75%;
    }
    .col-lg-push-8 {
        left: 66.66666667%;
    }
    .col-lg-push-7 {
        left: 58.33333333%;
    }
    .col-lg-push-6 {
        left: 50%;
    }
    .col-lg-push-5 {
        left: 41.66666667%;
    }
    .col-lg-push-4 {
        left: 33.33333333%;
    }
    .col-lg-push-3 {
        left: 25%;
    }
    .col-lg-push-2 {
        left: 16.66666667%;
    }
    .col-lg-push-1 {
        left: 8.33333333%;
    }
    .col-lg-push-0 {
        left: auto;
    }
}
/*xl*/
@media (min-width: 1200px) {
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }
    .col-xl-1 {
        width: 8.33333333%;
    }
    .col-xl-2 {
        width: 16.66666667%;
    }
    .col-xl-3 {
        width: 25%;
    }
    .col-xl-4 {
        width: 33.33333333%;
    }
    .col-xl-5 {
        width: 41.66666667%;
    }
    .col-xl-6 {
        width: 50%;
    }
    .col-xl-7 {
        width: 58.33333333%;
    }
    .col-xl-8 {
        width: 66.66666667%;
    }
    .col-xl-9 {
        width: 75%;
    }
    .col-xl-10 {
        width: 83.33333333%;
    }
    .col-xl-11 {
        width: 91.66666667%;
    }
    .col-xl-12 {
        width: 100%;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }
    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-xl-offset-9 {
        margin-left: 75%;
    }
    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-xl-offset-6 {
        margin-left: 50%;
    }
    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-xl-offset-3 {
        margin-left: 25%;
    }
    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-xl-offset-0 {
        margin-left: 0;
    }

    .col-xl-pull-12 {
        right: 100%;
    }
    .col-xl-pull-11 {
        right: 91.66666667%;
    }
    .col-xl-pull-10 {
        right: 83.33333333%;
    }
    .col-xl-pull-9 {
        right: 75%;
    }
    .col-xl-pull-8 {
        right: 66.66666667%;
    }
    .col-xl-pull-7 {
        right: 58.33333333%;
    }
    .col-xl-pull-6 {
        right: 50%;
    }
    .col-xl-pull-5 {
        right: 41.66666667%;
    }
    .col-xl-pull-4 {
        right: 33.33333333%;
    }
    .col-xl-pull-3 {
        right: 25%;
    }
    .col-xl-pull-2 {
        right: 16.66666667%;
    }
    .col-xl-pull-1 {
        right: 8.33333333%;
    }
    .col-xl-pull-0 {
        right: auto;
    }
    .col-xl-push-12 {
        left: 100%;
    }
    .col-xl-push-11 {
        left: 91.66666667%;
    }
    .col-xl-push-10 {
        left: 83.33333333%;
    }
    .col-xl-push-9 {
        left: 75%;
    }
    .col-xl-push-8 {
        left: 66.66666667%;
    }
    .col-xl-push-7 {
        left: 58.33333333%;
    }
    .col-xl-push-6 {
        left: 50%;
    }
    .col-xl-push-5 {
        left: 41.66666667%;
    }
    .col-xl-push-4 {
        left: 33.33333333%;
    }
    .col-xl-push-3 {
        left: 25%;
    }
    .col-xl-push-2 {
        left: 16.66666667%;
    }
    .col-xl-push-1 {
        left: 8.33333333%;
    }
    .col-xl-push-0 {
        left: auto;
    }
}

.d-none {
    display: none !important;
}
.d-block {
    display: block !important;
}

/*sm*/
@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }
    .d-sm-block {
        display: block !important;
    }
}
/*md*/
@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    .d-md-block {
        display: block !important;
    }
}
/*lg*/
@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
    .d-lg-block {
        display: block !important;
    }
}
/*xl*/
@media (min-width: 1200px) {
    .d-xl-none {
        display: none !important;
    }
    .d-xl-block {
        display: block !important;
    }
}

.clearfix:after,
.clearfix:before,
.container:after,
.container:before,
.row:after,
.row:before {
    display: table;
    content: ' ';
}
.clearfix:after,
.container:after,
.row:after {
    clear: both;
}

3.7 使用flex布局优化栅格系统

Zijeak
关注
专栏目录
移动端—响应式布局
weixin_46191548的博客
02-07 316
移动端开发的两种主流方案之一：响应式布局兼容 (1)内容没有受到(屏幕宽度)明显影响时，自适应宽高即可 (2)内容受到明显的影响时，改变布局，来保证内容的清晰 响应式布局：用于解决不同浏览器，不同分辨率及不同设备的不同显示效果 优点： 1)面对不同分辨率的设备灵活性很强 2)能够快捷的解决多设备显示适应的问题 缺点： 1)兼容各种设备工作量大，效率低，页面加载时间长 2)一定的程度上，会改变网站原...
移动端响应式布局
MartinYP的博客
08-10 1338
个人学习笔记
响应式布局Bootstrap--学习笔记
weixin_43482965的博客
03-05 774
一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200p...
移动端 、响应式布局
最新发布
m0_72498273的博客
07-24 701
移动端布局设备像素比DPR移动端页面书写的时候设计图的尺寸如果是移动端网页开发,UI常用的设计图尺寸是以iPhone6/7/8 为标准的,这个图的宽是750高度是1334,实际在浏览器中解析的时候是375*667 也就是UI给的设计图是一个2倍图 ,所以如果UI给的是这样的一个2倍图,那么我们开发在书写的时候,需要把测量的所有数据/2设备像素比dpr这里看到的2倍或者是3倍,有专业术语 叫做dpr 设备像素比设计图看到的750这样的宽度专业术语叫做物理像素。
移动端之响应式布局
qq_45256777的博客
09-30 951
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 优点： 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 所以在页面布局较为简单，内容偏少时可以使用响应式布局，而不用为每一个终端做一个页
移动端响应式布局技巧
qqlqsl的博客
02-11 371
基本概念 设备像素（物理像素/像素分辨率）：显示器的最小物理单位（对于一个显示器来说是固定的），以手机为例，iphonex像素分辨率为1125X2436，是指屏幕横向能线上1125个物理像素点，纵向能线上2436个物理像素点。通常说的4K显示器指的是4096X2160 设备独立像素 ：一个设备独立像素可能包含多个物理像素 devicePixelRatio：像素比，指的是物理像素和设备独立像素的比，即1独立像素由多少个物理像素渲染 dpr：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素
移动端 响应式布局
m0_46515475的博客
07-24 439
移动端响应式布局
极速问诊移动端Web网页设计（ rem布局 ）
06-03
在移动端Web开发中，设计师和开发者通常会将根元素的字体大小设置为一个固定的值（如`10px`或`16px`），然后使用`rem`单位来定义其他元素的尺寸。例如，若设置`html`元素的`font-size`为`16px`，那么`1rem`就等于`16...
移动端web开发flex布局案例
04-07
在移动端Web开发中，Flex布局（Flexible Box布局）是一种强大的CSS布局模式，旨在提供更灵活的盒模型，以便在各种屏幕尺寸和设备上创建响应式布局。本案例将深入探讨Flex布局的应用，以及如何利用它来优化移动端网页...
像素密度与CSS3的viewport在移动端Web响应式布局中的运用
09-27
在移动端Web开发中，通过设置viewport元标签可以控制网页在移动设备上的布局和缩放行为。viewport元标签的基本用法如下： ```css @viewport { width: device-width; /* 设置宽度等于设备宽度 */ initial-scale: 1...
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
响应式布局是现代Web开发中不可或缺的一部分，它允许网站在不同设备上呈现良好的用户体验，无论设备的屏幕尺寸如何。在CSS3中，我们有多种工具可以实现这一目标，其中vw和rem单位是移动设备上实现响应式布局的有效...
移动端，响应式布局
lin_fightin的博客
10-02 196
Bootstrap 响应式布局经常用到Bootstrap,首先去官网下载，接着要导入Bootstrap的css和js.然后选择你要的类型，复制其html，style,js代码。在自己修改即可。 栅格系统 首先有个容器 div ,类名为container 一行row 里面有12列 代码：col-lg-x 超大屏幕下分x份 col-md-x 大屏幕 col-sm-x 中屏幕 col-xs-s 小屏幕 hidden-lg超大屏幕下隐藏 -md大屏幕下隐藏 -sm中屏幕下隐藏 -xs小屏幕下隐藏 visible-m
移动端响应式
aijian8502的博客
10-09 96
一、css3的@media媒体查询 1、定义和使用 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。 语法： 　　@media mediaType and|not|only (med...
【Mobile】Chapter4-移动端 WEB 开发之响应式布局
江湖人称菠萝包
07-21 277
Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。中文官网：http://www.bootcss.com/官网：http://getbootstrap.com/推荐使用：http://bootstrap.css88.com/框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。
移动端与响应式布局
403 Forbidden
08-29 366
切换设备 浏览器切换设备步骤： F12开启控制台，如图： viewport 视窗的设置 viewport只针对于移动端，PC端无效 content的配置： width=device-width：宽度等于设备宽度，浏览器宽度分辨率等于系统的分辨率 initial-scale=1：初始化比例是1 minimum-scale=1：最小的缩小比例是1 maximum-scale=1：最大的放大比例是1 user-scalable=no：用户不允许缩放 物理分辨率与逻辑分辨率 物理分辨率：即 标准分辨率，是指 显
移动端WEB开发之响应式布局
weixin_50643611的博客
04-04 1618
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值