一、移动适配
rem ： 目前多数企业在用的解决方案
vw / vh：未来的解决方案
1.1 rem
使用rem单位设置网页元素的尺寸
◆网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
◆px单位或百分比布局可以实现吗？
1、px单位是绝对单位
2、百分比布局特点宽度自适应，高度固定
无rem缺点.png
3、有自适应时
有rem.png
◆rem单位
a、相对单位
b、 rem单位是相对于HTML标签的字号计算结果
c、1rem = 1HTML字号大小 = 屏幕视口的 1/10 ；
1.2 rem移动适配 - 媒体查询
手机屏幕大小不同分辨率不同， 如何设置不同的HTML标签字号？
答：媒体查询
（1）媒体查询：能够检测视口的宽度，然后编写差异化的 CSS 样式；当某个条件成立, 执行对应的CSS样式
（2）写法：
媒体查询.png
Ⅰ、一般来说：
1、设备宽度大， 元素尺寸大
2、设备宽度小，元素尺寸小
Ⅱ、参考案例：
媒体查询案列.png
（3）rem单位尺寸：
算法：rem单位的尺寸 = px单位数值 / 基准根字号
尺寸大小.png
（4）扩展
1、flexible.js是手淘开发出的一个用来适配移动端的js框架。
2、核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
扩展.png
二、Less
1、 Less是一个CSS预处理器, Less文件后缀是.less
2、扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
3、注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
（1）用法：
1、注释
▲单行注释
语法：//注释内容
快捷键：Ctrl+/
▲块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
注释.png
▲运算
1、加、减、乘直接书写计算表达式
2、除法需要添加 （）或 ./
算法.png
