rem适配布局（rem+less+媒体查询 和 rem+flexible.js）

1. rem 基础

　rem 是一个相对单位，相似于 em ，em 是父元素字体大小。

　em 是相对于父元素  的字体大小来讲的

　rem 是相对于 html 元素 字体大小来讲的

　rem 优势 就是能够经过修改 html 里面的文字大小来改变页面中元素的大小能够总体控制

　好比：根元素（html ）设置的 font-size=12px；非根元素设置 width：2rem；则换成px 表示 24px（12px*2rem）

2. 媒体查询（@media）

　@media 能够针对不一样的屏幕尺寸设置不一样的样式

　语法规范：

　　@media  mediatype  and | not | only (media feature){

　　　　CSS - Code;

　　}

• 用 @media  开头
• mediatype  媒体类型     

　　　　all：用于全部设备，

　　　　print：用于打印机和打印预览，

　　　　screen：用于电脑屏幕，平板电脑，手机等

• 关键字 and  not   only   

　　　　and：能够将多个媒体特性链接到一块儿，至关于“且”的意思

　　　　not：排除某个媒体类型，至关于“非”的意思，能够省略

　　　　only：指定某个特定的媒体类型，能够省略

• media  feature 媒体特性 必须有小括号包含

　　　　width：定义输出设备中页面可见区域的宽度

　　　　max-width：定义输入设备中页面最大可见区域宽度

　　　　min-width：定义输入设备中页面最小可见区域宽度

　案例：

　　@media screen and（max-width：500px）{

　　　　body{

　　　　　　background:pink;

　　　　}

　　}

　注意点：

　　1. screen 还有 and 必须带上，不能省略

　　2. 小括号中的 数字 后面必须跟单位，970px  这个 px 不能省略

　　3. 媒体查询最好的方法就是从小到大

3. 媒体查询 + rem 实现元素动态大小变化

　rem 单位是跟着 html 来走的，有了 rem 页面元素能够设置不一样大小尺寸

　媒体查询能够根据不一样设备宽度来修改样式

　媒体查询 + rem 就能够实现不一样设备宽度，实现页面元素大小的动态变化

4. 引入资源（理解）

　当样式比较繁多的时候，能够针对不一样的媒体使用不一样 stylesheet（样式表）。

　原理，直接在 link 中判断设备的尺寸，而后引入不一样的css文件。

　语法规范：

　　<link  rel = "stylesheet"  media = "mediatype   and | not | only (media  feature)"  href = " style.css" >

　案例：

　　<link  rel = "stylesheet"  media = "screen  and （min-width:320px）"  href = " style320.css" >

　　<link  rel = "stylesheet"  media = "screen  and  （min-width:640px）"  href = " style640.css" >

5. Less基础

　Less 变量：变量是指没有固定的值，能够改变的，由于CSS中的一些颜色和数值等常常使用，样式后缀名.less 。

　@变量名：值；

　1. 变量名规范

• 必须有 @ 为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

　案例：

　　@color：pink；// 定义变量

　　body{

　　　　color：@color；  // 使用变量

　　}

　2. 编译

　　经过vscode中的插件 Easy LESS 编译为 css 文件，只要保存一下 Less 文件，会自动生成 CSS文件

　3. Less 嵌套

　　1.内层选择器的前面没有 & 符号，则它被解析为父选择器的后代

　　　　CSS中选择器嵌套：

　　　　#header .logo{

　　　　　　width:10px;

　　　　}

　　　　Less 嵌套写法：

　　　　#header{

　　　　　　.logo{

　　　　　　　　width:10px;

　　　　　　}

　　　　}

　　　2. 若是有 & 符号，它就被解析为父元素自身或父元素的伪类（交集|伪类|伪元素选择器）

　　　　　CSS中选择器嵌套：

　　　　　a:hover{

　　　　　　　color:red;

　　　　　}

　　　　　Less 嵌套写法：

　　　　　a{

　　　　　　　&：hover{

　　　　　　　　　color:red;

　　　　　　　}

　　　　　}

　　3.Less 运算

　　　less 中运算 可使用 加（+），减（-），乘（*），除（/）四种运算

　　　运算符中间左右有个空格隔开 1px  +  5

　　　对于两个值之间只有一个值有单位，则运算结果就取该单位

　　　对于两个不一样的单位的值之间的运算，运算结果的值取第一个值的单位

　　案例：

　　@font：50px；

　　@border：5px +5；

　　div{

　　　　width：200px - 50；

　　　　height：200px * 2；

　　　　border：@border  solid #ccc;

　　　　img{

　　　　　　width:82rem / @font;   //1.65rem

　　　　}

　　}

6.rem 两种适配方式

　技术方案1 ：less + 媒体查询 + rem

　技术方案2：flexible.js  + rem（推荐）

方式一：（rem + less + 媒体查询）

　1.动态设置 html 标签 font-size 大小

　　① 假设设计稿是 750px

　　② 假设整个屏幕划分为 15 等分（划分标准不一，能够是20份，也能够是10份）

　　③ 每一份做为 html 字体大小，这里就是 50px

　　④ 在320px 设备的时候，字体大小为 320 / 15 就是21.33px

　　⑤ 用页面元素的大小 除以不一样的 html 字体大小 会发现他们的比例仍是相同的

　　⑥ 好比 以 750px 为标准设计稿

　　⑦ 一个 100*100像素的页面元素在 750 屏幕下，就是 100 / 50 转换为 rem 是 2rem * 2rem 比例是1:1

　　⑧ 320 屏幕下，html字体大小为 21.33  则 2rem = 42.66px 此时宽和高都是 42.66 可是宽和高的比例仍是1:1

　　⑨ 可是已经能实现不一样屏幕下 页面元素盒子等比例缩放的效果。

　　原理总结：先拿一个标准的稿件（750px）来算出 rem 值，剩下的屏幕，只要把html的文字大小的值算出来，就能够等比例缩放。

　　算法：（元素大小取值方法）

　　　① 最后的公式：页面元素的 rem 值 = 页面元素（px） / （屏幕宽度 / 划分的份数）；//    100px / ( 750px / 15 )；

　　　② 屏幕宽度 / 划分的份数  就是 html  font-size 的大小

　　　③ 或者 ： 页面元素的 rem 值 = 页面元素值（px）/ html  font-size 字体大小

　2. import 导入样式

　　语法：

　　　　@import   “common”；     // 在新的 index.less 中 导入 common.less  文件

　　注意：

　　　　@import  导入的意思，能够把一个样式文件导入到另一个样式文件里面

　　　　link 是把一个 样式文件引入到 html 页面里面

7. 方式二：（flexible.js + rem 适配）

　1. 插件安装（cssrem）

　　1. VSCode 安装 cssrem 插件，能够实现 px 转换为 rem 的操做

　　2. 设置 —>setting.json —> cssroot 把字体大小设置为 75（由于稿件是750px，有划分了10等份）

　　3. 保存 重启 VSCode

　2. 简洁高效的 rem 适配方案 flexible.js

　　　手机淘宝团队出的简洁高效 移动端适配库

　　　不再须要写不一样屏幕的媒体查询，由于里面 js 作了处理

　　　他的原理是把当前设备划分为 10 等份，可是不一样设备下，比例仍是一致的

　　　咱们要作的，就是肯定好咱们当前设备的html文字大小就能够

　　　好比当前设计稿是 750px， 那么咱们只须要把 html 文字大小设置为 75px（750px / 10）就能够

　　　里面页面元素 rem 值：页面元素的px值 / 75

　　　剩余的，让 flexible.js 来计算

　3. 须要强制设定屏幕超过750px ，就按照 750px 的设计稿来设计，不会让页面超过 750px

　　@media screen and （min-width：750px）{    //  屏幕大于等于750px 的状况下

　　　　html{

　　　　　　font-size：75px !important;    //提高权重

　　　　}

　　}