WEBSTORM前端 —— 第3章：移动 Web —— 第3节：移动适配
目录
一、移动Web基础
1.谷歌模拟器
2.屏幕分辨率
3.视口
4.二倍图
二、适配方案
三、rem 适配方案
四、less
1.less – 简介
2.less – 注释
3.less – 运算
4.less – 嵌套
5.less – 变量
6.less – 导入
7.less – 导出
8.less – 禁止导出
五、案例—极速问诊
移动适配
一、移动Web基础
1.谷歌模拟器
2.屏幕分辨率
3.视口
4.二倍图
①概念：设计稿里面每个元素的尺寸的倍数
②作用：防止图片在高分辨率屏幕下模糊失真
二、适配方案
三、rem 适配方案
- rem单位，是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
四、less
①思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。
②解决方案：可以通过Less实现。
1.less – 简介
- Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
- 注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
- VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
2.less – 注释
3.less – 运算
4.less – 嵌套
5.less – 变量
①概念：容器，存储数据
②作用：存储数据，方便使用和修改
③语法：
- 定义变量：@变量名: 数据;
- 使用变量：CSS属性：@变量名;
6.less – 导入
7.less – 导出
8.less – 禁止导出
五、案例—极速问诊
