积极响应式产业布局：只须要合作开发两套标识符，只须要两套标识符使网页适应环境相同的萤幕。
积极响应式结构设计透过检验视口解析度，特别针对相同应用程序在应用程序做标识符处置，来展现出相同的产业布局和文本；
积极响应式产业布局的 5 种同时实现计划
比率产业布局新闻媒体查询产业布局rem 积极响应式产业布局vw 积极响应式产业布局flex 灵活性产业布局一、比率产业布局
比如说，当应用程序的长度或是度发生变动时，透过比率基层单位能使应用程序中的模块的宽和高随著应用程序的变动而变动，进而同时实现积极响应式的效用。
height、width 特性的比率借力于父条码的宽高。但 padding、border、margin 等特性的情形又不一样1、子原素的 top 和 bottom 假如增设比率，则相对于间接非 static 功能定位（预设功能定位）的父原素的度，同样，子原素的 left 和 right 假如增设比率，则相对于间接非 static 功能定位（预设功能定位的）父原素的长度。
2、子原素的 padding 和 margin 假如增设比率，无论是横向路径或是是水准路径都相对于间接母亲原素的 width，而与父原素的 height 毫无关系。border-radius 为比率，则是相对于另一方面的长度优点：
计算困难，假如我们要定义一个原素的长度和度，按照结构设计稿，必须换算成比率基层单位。
二、新闻媒体查阅产业布局
透过@media 新闻媒体查阅，能透过给相同萤幕的大小编写相同的样式来同时实现积极响应式的产业布局。
积极响应式优点：假如应用程序大小改变时，须要改变的样式太多，那么多套样式标识符会很繁琐。
<style> .box { width: 500px; height: 500px; background-color: aqua; } @media screen and (max-width: 1280px) { .box { width: 400px; height: 400px; } } @media screen and (max-width: 980px) { .box { width: 300px; height: 300px; } } @media screen and (max-width: 765px) {.box { width: 200px; height: 200px; } } </style> <body> <div class=“box”></div> </body>1、在实际开发中，常用的积极响应断点阈值设定
（括号后面是样式的缩写）
<576px （Extra small）>=576px （Small — sm）>=769px （Medium — md）>=992px （Large — lg）>=1200px （X-Large — xl）>=1400px （XX-Large —- xxl）2、在实际合作开发中，常用的两种适配计划
a、移动端 到 PC 端适配原则 （min-width 从小到大）<style> body { background-color: #000; } @media screen and (min-width: 576px) { body{background-color: red; } } @media screen and (min-width: 769px) { body { background-color: yellow; } }@media screen and (min-width: 992px) { body { background-color: blue; } }@media screen and (min-width: 1200px) { body { background-color: green; } } @mediascreenand (min-width: 1400px) { body { background-color: orange; } } </style>b、PC 端 到 移动端适配原则 （max-width 从大到小）<style> body { background-color: #000; } @media screen and (max-width: 1400px) { body { background-color: red; } } @media screen and (max-width: 1200px) { body { background-color: yellow; } } @media screen and (max-width: 992px) { body { background-color: blue; } }@media screen and (max-width: 769px) { body { background-color: green; } } @media screen and (max-width: 576px) { body { background-color: orange; } } </style>3、在实际合作开发时，@media 会结合删格系统一起来使用，同时实现真正意义上的积极响应式合作开发。
栅格产业布局+断点设定 同时实现积极响应式@media screen and (min-width: 576px) { .col-sm-1 { grid-area: auto/auto/auto/span1; } .col-sm-2 { grid-area: auto/auto/auto/span 2; } .col-sm-3 { grid-area: auto/auto/auto/span3; } ……三、rem 产业布局
1、rem 如何适配
rem 是相对于 html 根原素的字体大小的基层单位。我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。比如说：
html { font-size: 10px; } .box { width: 10rem; height: 20rem; }当 html 中 font-size: 10px; 时，此时 1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px;当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为 200px 和 400px;2、实际合作开发中如何适配，如何将结构设计稿对应的 px 基层单位转换为 rem 基层单位
在实际的合作开发中，我们通常会以 750px 的移动端结构设计稿来合作开发。我们在标识符写完后，统一会把所有 px 基层单位全部转成 rem 来同时实现。在 px 基层单位下，一个盒子的样式如下：
.box { width: 700px; height: 500px; font-size: 20px; padding: 10px; background-color: red; }假如我们把总宽 750px 分成 10rem，些时 1rem = 75px;，转成对应的 rem 基层单位，就是用对应的 px/75px，得到如下结果。
.box { width: 9.3333rem; height: 6.6667rem; font-size: 0.2667rem; padding: 0.1333rem; background-color: red; }以上基层单位的转换，我们能利用 vscode 的插件 px to rem 来自动同时实现。把所有标识符全部写完，然后一次性用 px to rem 插件转换成 rem 基层单位3、接下来如何适配相同的应用程序，同时实现等比例的缩放呢 ？
比如说现在有 5 个同尺寸的萤幕 （750 640 480 375 320），所有萤幕整体宽分成 10rem那我们就须要分别得到这几种相同萤幕下对应的 html 根原素的 font-size 大小了。萤幕尺寸
html 中 font-size 大小 （1rem 大小）
750px
75px
640px
64px
480px
48px
375px
37.5px
320px
32px
();
function initPage() {
var clientWidth =document.documentElement.clientWidth|| document.body / clientWidth; var html = document.getElementsByTagName(“html”)[0]; //获取html根原素html.style.fontSize = clientWidth / 10 + “px”; //动态增设font-size大小}
window.onresize = initPage;
</script>注：
我们能用 flexible.js 插件来帮我们同时实现
flexible 原理就是根据相同的萤幕长度动态的增设网页中 html 根节点的 font-size然后咱们将所有的 px 用 rem 来代替，这样就同时实现了相同大小的萤幕都适应环境相同的样式了。四、vw、vh 积极响应式产业布局
vw 和 vh 分别相对的是视图窗口的长度和视口窗的度。
100vw = 视图窗长度 ，100vh = 100 视图窗度假如移动端有 5 个相同的视口宽尺寸 750 ，640，480，375，320，则在相同尺寸下，对应的 1vw 的 px 值如下表移动端尺寸1vw750px7.5px640px6.4px480px4.8px375px3.75px320px320px我们在实际合作开发时，只须要按其中的某一个尺寸来的 px 基层单位的结构设计稿来合作开发就好（一般是以 750px 的大小为主）标识符全部合作开发好后，我们再利用 vscode 的插件 px to vw 来同时实现基层单位的自动转换。案例： 宽为 750px 结构设计稿下的某个原素样式如下
<style> body { margin: 0; } .box { width: 750px; height: 300px; background-color: red; } </style> <body> <div class=“box”></div> </body>转换为 vw 后的标识符如下：
<style> body { margin: 0; } .box { width: 100vw; height: 40vw; background-color: red; } </style> <body> <div class=“box”></div> </body>在宽为 750px 的结构设计稿下，把 px 转换为 vw，是用 px/7.5 得到对应的 vw 基层单位值转换好后，vw 是自动应视口宽的，所以就达到了积极响应式合作开发的效用。五、flex 灵活性产业布局
灵活性产业布局是一种十分方便的，只须要依赖于 CSS 样式的同时实现积极响应式产业布局的形式，也是最多用到的一种同时实现积极响应式的方法。
灵活性产业布局在父、子原素上都有相对应的特性来规范子原素在父原素中的 “ 弹力 ”。
在父原素上，我们经常会用到的有关灵活性产业布局的特性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个特性分别从 主轴的路径、是否换行、项目在主轴上的对齐形式、项目在交叉轴上的对齐形式、项目在多根轴线上的对齐形式来规范了项目在父原素中的灵活性。在子原素上，我们经常会用到的有关灵活性产业布局的特性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个特性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐形式来规范了项目另一方面的灵活性。假如你才开始学前端，能看看，我们这里有html+css阶段完整教程，我们在钉钉群里有全套的课程包含（入门到精通课程、4个综合项目（称之为15天训练营，在群里是从第二十三节课开始的）、30个练习案例！）假如须要，能扫描下方链接，添加我，邀请你进入钉钉群学习！
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
