移动适配
网页效果
Ø 屏幕宽度不同，网页元素尺寸不同（等比缩放）
l px单位或百分比布局可以实现吗？
Ø px单位是绝对单位
Ø 百分比布局特点宽度自适应，高度固定
l 适配方案
Ø rem
Ø vw / vh
rem单位
Ø 相对单位
Ø rem单位是相对于HTML标签的字号计算结果
Ø 1rem = 1HTML字号大小
l 思考
Ø 1. 手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
在body的最后一行，插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小
l flexible.js是手淘开发出的一个用来适配移动端的js框架。
l 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
Ø 2. 设备宽度不同，HTML标签字号设置多少合适？
适配375的手机屏幕，1html 根字号 37.5px = 视口宽度的十分之一
适配414的手机屏幕，1html 根字号41.4px = 视口宽度的十分之一
Less
目标：使用Less语法快速编译生成CSS代码
l Less是一个CSS预处理器, Less文件后缀是.less
l 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
l 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
Easy Less :
l vscode插件
l 作用：less文件保存自动生成css文件
注释：
l 单行注释
Ø 语法：// 注释内容
Ø 快捷键：ctrl + /
l 块注释
Ø 语法：/* 注释内容 */
Ø 快捷键： shift + alt + A
运算：
l 加、减、乘直接书写计算表达式
l 除法需要添加 小括号 或 .
变量
l把颜色提前存储到一个容器，设置属性值为这个容器名
l 变量：存储数据，方便使用和修改。
l 语法：
Ø 定义变量：@变量名: 值;
Ø 使用变量：CSS属性：@变量名
开发网站时，网页如何引入公共样式？
Ø CSS：书写link标签
Ø Less：导入
使用Less语法导出CSS文件
l 方法二：控制当前Less文件导出路径
Ø Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
禁止导出
Ø 在less文件第一行添加: // out: false
