一、移动适配
1 rem
rem ： 目前多数企业在用的解决方案
vw / vh：未来的解决方案
网页效果屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
px单位是绝对单位百分比布局特点宽度自适应，高度固定
适配方案
rem
vw / vh
rem单位
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
2 媒体查询
思考
手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式当某个条件成立, 执行对应的CSS样式
语法：
3 rem移动适配
思考手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
设备宽度不同，HTML标签字号设置多少合适？
设备宽度大， 元素尺寸大
设备宽度小，元素尺寸小
注意：
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
rem单位尺寸
1.根据视口宽度，设置不同的HTML标签字号
2.书写代码，尺寸是rem单位
确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
4 flexible
1.使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
2.flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
二、Less语法
思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现。
1 语法糖-CSS预处理语言
1.语法糖也叫糖衣语法:
2.是由英国计算机科学家彼得:约翰兰达(Peter J. Landin)发明的一一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
3.通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。给复杂的编程语言包裹- -层糖衣(易于开发者开发)。
4.常见的CSS预处理器: Sass、 Less、 Stylus
2 编译插件
Easy Less : vscode插件作用：less文件保存自动生成css文件
3 Less
目标：使用Less语法快速编译生成CSS代码
1.Less是一个CSS预处理器（即：写CSS的工具）, Less文件后缀是.less
2.扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
3.注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
4 Less语法
1 注释
注释：单行注释
语法：// 注释内容
快捷键：ctrl + /
块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
2 计算
运算：加、减、乘直接书写计算表达式除法需要添加 小括号 或 .
注意：
1.运算符两边 要有一个空格
2.单位写在哪个数值前后都可以
3.表达式存在多个单位以第一个单位为准
3 嵌套
作用：快速生成后代选择器
语法：
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
注意：
1.&表示当前容器
4 变量
思考：网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
方法一：逐一修改属性值（太繁琐）
方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
5 导入
使用Less导入写法引用其他Less文件
思考：开发网站时，网页如何引入公共样式？CSS：书写link标签Less：导入
导入: @import “文件路径”;
6 导出
方法一：配置EasyLess插件， 实现所有Less有相同的导出路径配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
方法二：
控制当前Less文件导出路径 Less文件第一行添加如下代码, 注意文件夹名称后面添加
禁止导出
在less文件第一行添加: // out: false
导出压缩css文件
在less文件第一行添加: // compress: true
注意：
既要禁止导出，又要压缩等多个要求，在第一行用逗号隔开即可
