bootstrap响应式开发与栅格系统

响应式开发原理

响应式开发 使用媒体查询

​ @media css3属性

通过媒体查询 判断屏幕大小 决定使用什么布局

/* 媒体查询里面 是一个独立的css语法环境 */
@media(判断条件){   // min-width    max-width    width
	元素样式
}

​ 手机 width < 768px

​ 平板 width > 768px && width < 992

​ 桌面显示器 width > 992px && width <1200

​ 大桌面显示器 width > 1200px

响应式开发与原生移动端开发区别

​ 1.显示的结构上

​ 响应式开发 不同屏幕大小 会显示不同的布局 但是图片以及字体的大小不会发生变化 仅仅是布局

​ 原生的移动端开发 根据屏幕大小不同 对页面内容进行等比缩放

​ 2.开发的页面不同

​ 响应式开发 开发的只是一个页面 而且同时运行在移动端和pc端 但是他根据不同的屏幕大小 会调整布局 展示对应的页面

​ 移动端开发 其实是开发两套页面 分别针对于移动端和pc端进行开发 当在不同端时 加载对应页面

​ 3.应用场景不同

​ 响应式开发 使用一个页面适配多个终端 开发效率高 但是由于所有的代码都在一个页面上 所以会有冗余 运行效率低 ,一般用于单纯的展示和宣传页面 一般公司官网 活动页面

​ 移动端开发 针对每一个不同的端 都要开发出一套页面 开发维护效率低 但是由于针对性强 只需要对应端的页面代码 运行效率高

​ 一般这种会适用于老网站 对于已经上线的老系统 需要开发移动端 就单独在写一套移动端代码 而且还适用于页面性能要求很高的页面

​ 例如 电商网站 直播网站

媒体查询案例

​ 需求：

​ 大屏 一行4列

​ 中屏 一行3列

​ 小屏 一行2列

​ 超小屏 一行1列

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .row{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .col{
        border: 1px solid;
        text-align: center;
        line-height: 50px;
    }
    /* 大屏 */
    @media (min-width: 1200px){
        .col{
            width: 25%;
        }
    }
    /* 中屏 */
    @media (min-width: 992px) and (max-width: 1200px){
        .col{
            width: 33.33%;
        }
    }
    /* 小屏 */
    @media (min-width: 768px) and (max-width: 992px){
        .col{
            width: 50%;
        }
    }
    /* 超小屏 */
    @media (max-width: 768px){
        .col{
            width: 100%;
        }
    }

</style>

栅格系统

通常在使用栅格系统时 会把页面分成12份

/* 一行12个 每份占1/12 */
.col_1 {
    width: 8.333%;
}
/* 一行6个 每份占2/12 */
.col_2 {
    width: 16.662%;
}
/* 一行4个 每份占3/12 */
.col_3 {
    width: 25%;
}
/* 一行3个 每份占4/12 */
.col_4 {
    width: 33.333%;
}
/* 一行2个 每份占6/12 */
.col_6 {
    width: 50%;
}
.col_8 {
    width: 66.667%;
}
/* 一行6个 每份占1/6 */
.col_12 {
    width: 100%;
}

响应式栅格系统

响应式栅格系统原理

​ 把屏幕分成12列

​ 如果是1列布局 那么就把12列合并 也就是 col-12

​ 如果是2列布局 那么就把6列合并 也就是 col-6

​ 如果是3列布局 那么就把4列合并 也就是 col-4

​ 如果是4列布局 那么就把3列合并 也就是 col-3

​ 如果是6列布局 那么就把2列合并 也就是 col-2

​ 如果是12列布局 那么就把1列合并 也就是 col-1

通过媒体查询 加不同前缀

​ 超小 xs

​ 小屏幕 sm

​ 中屏幕 md

​ 大屏幕 lg

/* 超小屏 */
@media (max-width: 768px) {
    /* 一行12个 每份占1/12 */
    .col-xs-1 {
        width: 8.333%;
    }
    /* 一行6个 每份占2/12 */
    .col-xs-2 {
        width: 16.662%;
    }
    /* 一行4个 每份占3/12 */
    .col-xs-3 {
        width: 25%;
    }
    /* 一行3个 每份占4/12 */
    .col-xs-4 {
        width: 33.333%;
    }
    /* 一行2个 每份占6/12 */
    .col-xs-6 {
        width: 50%;
    }
    .col-xs-8 {
        width: 66.667%;
    }
    /* 一行1个 每份占12/12 */
    .col-xs-12 {
        width: 100%;
    }
}

/* 小屏 */
@media (min-width: 768px) and (max-width: 992px) {
    .col-sm-1 {
        width: 8.333%;
    }
    .col-sm-2 {
        width: 16.662%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.333%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-8 {
        width: 66.667%;
    }
    .col-sm-12 {
        width: 100%;
    }
}
/* 中屏 */
@media (min-width: 992px) and (max-width: 1200px) {
    .col-md-1 {
        width: 8.333%;
    }
    .col-md-2 {
        width: 16.662%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.333%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-8 {
        width: 66.667%;
    }
    .col-md-12 {
        width: 100%;
    }
}

/* 大屏 */
@media (min-width: 1200px) {
    .col-lg-1 {
        width: 8.333%;
    }
    .col-lg-2 {
        width: 16.662%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.333%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-8 {
        width: 66.667%;
    }
    .col-lg-12 {
        width: 100%;
    }
}

本文地址：https://blog.csdn.net/linglingzi001/article/details/107204087