目錄

一、移動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 – 禁止導出?

---

五、案例—極速問診

?