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