响应式开发原理

响应式开发 使用媒体查询

​ @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%;}
}