「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」 。
什么是移动适配呢？就是视口内容随着屏幕等比例进行缩放。使得用户不管在什么大小的屏幕，都可以看到相同的页面，也可以在多端显示，可以节省代码量，维护起来更加方便。用户体验感也更好 移动适配方案：rem/vw/vh
rem
1，定义：1rem就是1根字号的大小（根标签html的font-size大小）
2.单位：相对单位。
3.计算rem的方法：
媒体查询：
(1)媒体查询就是通过给不同的视口宽度设置不同的根字号，让所有的根字号和视口宽度的比例都相同，来达到任意视口宽度都可以进行等比例缩放的目的
（2）语法：
@media (视口宽度) {
html{
font-size=根字号大小；
}
}
rem和媒体查询适配：媒体查询设置根标签文字大小为视口的1/10（比例可以随机设置，1/10只是推荐使用的比例）
当屏幕宽度满足width的值的时候，就会执行里面的font-size
(3)rem的计算：
rem的单位尺寸=实际px值/基准根字号（基准根字号就是IU给的设计稿的根字号）
（4）rem的适配：
（4.1）链入flexible.js
目的：将根标签的文字大小设置成视口宽度的1/10
（4.2）将px单位转换成rem尺寸。测量的尺寸/（设计稿/10）
less
1.定义
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
2.导入less文件夹
（1）写法：@import '文件'（@import与'文件'用空格隔开）
后面的less可以默认不写
3，导出路径
（1）导出到上一层路径的文件夹里：
写法：//out:../css/
(2)导出到上一层路径的文件里：
写法：//out:../css
（3）导出到本层路径的文件夹里：
写法：//out:./css/
(4)导出到本层路径的文件里：
写法：//out:./css
（5）禁止导出：
//out:false
所有导出路径，禁止导出都要写在第一行,如果需要同时导出到很多个css文件里，可以依次换到第一个位置进行导出
4.注释
（1）单行注释：//（单行注释css看不见） 快捷键：alt+/
(2)多行注释：/* */（多行注释css可以看见，因为css里的注释也是这样的，所以可以看见） 快捷键：shift+alt+A
5.算法：
（1）加减乘： 加：width：200px+5;
减：width：200px-5;
乘法：width：200px*5;
（2）除法：之前版本的写法：a/b
现在的写法：（a/b）或者：a./b
如果写了多个单位，以第一个单位为准: 例如：width:(10rem/5px)--->得出来的结果的单位是rem
6.声明变量并调用:
(1)定义:@变量名:值;
(2)使用:css属性:@变量名
在less里的样子:
@bgc : pink;
div {
background-color: @bgc;
}
最后在css里生成的结果:
div {
background-color: pink;
}
7.嵌套写法：
（1）父子嵌套：
.father {
.son {
div {
background-color: #fff;
}
}
}
// 最后在css里生成的结果
.father .son div {
background-color: #fff;
}
（2）以&符号开头 &：hover {}（选择当前选择器）
.father {
.son {
&:hover {
background-color: #fff;
}
}
}
// 最后在css里生成的结果
.father .son:hover {
background-color: #fff;
}
使用less嵌套的好处：方便代码的迁移，如果需要将father这块的样式全部都移到某行，直接把嵌套移过去就好了，不需要单行移动
