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 适配方案 

1. rem单位，是相对单位
2. rem单位是相对于HTML标签的字号计算结果
3. 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 – 禁止导出 

---

五、案例—极速问诊