知识导航
- 何为rem
- 何为媒体查询
- 何为less
- 目前主流方案
前言：
rem适配方案
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。现在我们就可以真正做到随着设置尺寸的变换所有的元素自适应了
原理：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
1. 何为rem
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。而rem的参照物是html的fontsize
比如
html {
font-size: 20px;
}
div {
width: 2rem;
}
此时div的宽度为2倍的html字体大小，即为40px。
2. 媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
基本使用：
@media mediatype and|not|only (media feature) {
}
- 类似于动画使用@media打头定义
- mediatype 媒体类型
属性值如下：
一般我们用的到的也就是第三个。 - 关键字，and、not、only。关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
- and：可以将多个媒体特性连接到一起，相当于“且”的意思。
- not：排除某个媒体类型，相当于“非”的意思，可以省略。
- only：指定某个特定的媒体类型，可以省略。 - 媒体特性，每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意的是要放在小括号里面。
先介绍一下它们的常用值：
接下来看一下小案例深入了解一下吧
效果图：
关键代码：
@media screen and (max-width: 540px) {
body {
background-color: aqua;
}
}
@media screen and (min-width: 540px) {
body {
background-color: red;
}
}
@media screen and (min-width: 1000px) {
body {
background-color: yellow;
}
}
推荐写法：
不然这里的第二段范围便麻烦了些，须同时规定两端的尺寸。
@media screen and (min-width: 1000px) {
body {
background-color: aqua;
}
}
@media screen and (min-width: 540px) and (max-width: 1000px) {
body {
background-color: red;
}
}
@media screen and (max-width: 540px) {
body {
background-color: yellow;
}
}
3. less
何为less呢，less其实就是对css所做的扩展。那less有什么作用呢
下面我先来介绍一下css的缺点;
- css没有计算能力，没有变量。
- CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度很高的。
- 不方便维护及扩展，不利于复用
在rem布局的时候，我们就被要求必须把宽高字体等从px转到rem。这里就用到了大量的计算。
如定义的html的fontsize为20，我们盒子的宽度等需要设置大小的东西就必须统统的除以20.求得rem。这要是人为的话估计我们得把电脑砸了。不说一个网站了，一个主要页面就得多少。这时less的强大就体现出来了。
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
less的安装也十分简单，当然这里需要我们事先安好了node。node安装同样简便在我们hexo博客搭建有写过这里便不再说了。less安装命令npm install -g less
vscode 插件：Easy LESS ，用来把less文件编译为css文件
简单使用：
和css外联版一样，先建一个后缀为less的文件。我们的Easy LESS插件会自动给我们转换为css文件。我们只需将这个css文件link到我们的html就行了。看一下less的使用吧
less变量：
@变量名:值;
必须有@为前缀
不能包含特殊字符
不能以数字开头
示例：
@color:yellow;
body {
background-color: @color;
}
less嵌套：
结构：
<div class="div01">
<div class="div02"></div>
</div>
传统设置样式：
.div01 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.div01 .div02 {
width: 30px;
height: 30px;
background-color: red;
}
less中：
.div01 {
width: 100px;
height: 100px;
background-color: yellowgreen;
.div02 {
width: 30px;
height: 30px;
background-color: red;
}
}
如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接
传统：
a:hover{
color:red;
}
less中：
a{
&:hover{
color:red;
}
}
Less 运算：
任何数字、颜色或者变量都可以参与运算。Less提供了加、减、乘、除算术运算。
在less中使用加法操作，可见其自动生成的css文件已经帮我们做好了
值得注意的是：
- 运算符中间左右要用空格隔开
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 。如1px+1rem最后为2px
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
4. 目前主流方案
方案一：less+rem+媒体查询
方案二：lflexible.js+rem（淘宝推出，利用js随时监测设备宽度）
实际开发步骤：
先介绍方案一（方案二较为简单不做介绍，它的原理是把当前设备划分为10等份。我们要做的，就是确定好我们当前设备的html 文字大小就可以了）：
①假设设计稿是750px
②我们便把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份），每一份作为html字体大小，这里就是50px。那么在320px设备的时候，字体大小为320/15就是 21.33px
③因为设置的在不同宽度是html字体大小是不同的，我们页面元素的大小便可以以它作为基准。因为参照物是相同的。所以所有元素的比例是不会改变的。如参照物为2px，某一元素的宽高均为2倍的它。即均为4/2=2rem。当设备宽度改变时参照物变为了4px，这一元素等比扩大化为px仍然为8px8px的正方形盒子。可见除了大小它们的形状没有受到任何影响。
④这便实现不同屏幕下 页面元素盒子等比例缩放的效果
提炼：
- 屏幕宽度/划分的份数就是 htmlfont-size 的大小
- 页面元素的值 /htmlfont-size 的大小就是所得rem值
注意less运算的单位关系
如盒子宽50px，htmlfont-size为20px。我们所要的rem值=50rem/20 。注意less中的单位
