今日重點: 移動適配

rem： 目前多數(shù)企業(yè)在用的解決方案
vw / vh：未來的解決方案

1.rem

能夠使用rem單位設(shè)置網(wǎng)頁元素的尺寸
思考 :
?手機屏幕大小不同，分辨率不同， 如何設(shè)置不同的HTML標簽字號？
?設(shè)備寬度不同，HTML標簽字號設(shè)置多少合適？
?設(shè)備寬度大， 元素尺寸大
?設(shè)備寬度小，元素尺寸小

px單位或百分比布局可以實現(xiàn)嗎？
? px單位是絕對單位
?百分比布局特點寬度自適應(yīng)，高度固定

rem單位
? 相對單位
? rem單位是相對于HTML標簽的字號計算結(jié)果
? 1rem = 1HTML字號大小

2. rem移動適配

能夠使用媒體查詢設(shè)置差異化CSS樣式
思考 :
?手機屏幕大小不同，分辨率不同， 如何設(shè)置不同的HTML標簽字號？

?媒體查詢
媒體查詢能夠檢測視口的寬度，然后編寫差異化的 CSS 樣式
當某個條件成立, 執(zhí)行對應(yīng)的CSS樣式

寫法 :

示意圖

3. rem適配原理

實現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果
rem單位尺寸

1. 根據(jù)視口寬度，設(shè)置不同的HTML標簽字號

2. 書寫代碼，尺寸是rem單位
   確定設(shè)計稿對應(yīng)的設(shè)備的HTML標簽字號
   查看設(shè)計稿寬度 → 確定參考設(shè)備寬度(視口寬度) → 確定基準根字號（1/10視口寬度）

   rem單位的尺寸
   ? N * 37.5 = 68 → N = 68 / 37.5
   ? rem單位的尺寸 =** px單位數(shù)值 / 基準根字號**
   

4. flexible

使用flexible js配合rem實現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果

思考：
咱們檢測了3個視口，分別設(shè)置了根字號，有什么弊端嗎？
答：手機設(shè)備多，屏幕尺寸不一，視口不僅僅有這3個

1. Less

使用Less運算寫法完成px單位到rem單位的轉(zhuǎn)換
思考：
在px單位轉(zhuǎn)換到rem單位過程中，哪項工作是最麻煩的？
答：除法運算。CSS不支持計算寫法。
解決方案：可以通過Less實現(xiàn)。

使用Less語法快速編譯生成CSS代碼
Less是一個CSS預(yù)處理器, Less文件后綴是.less
擴充了 CSS 語言, 使 CSS 具備一定的邏輯性、計算能力
注意：瀏覽器不識別Less代碼，目前階段，網(wǎng)頁要引入對應(yīng)的CSS文件

塊注釋
?語法：/ 注釋內(nèi)容 /
?快捷鍵： shift + alt + A
使用Less運算寫法完成px單位到rem單位的轉(zhuǎn)換

運算：
加、減、乘直接書寫計算表達式
除法需要添加 小括號 或 .
注意：
? 表達式存在多個單位以第一個單位為準

嵌套：
作用：快速生成后代選擇器。

語法：

.box { color:pink }        a { color:pink }       p { color:pink }

?方法二： 把顏色提前存儲到一個容器，設(shè)置屬性值為這個容器名

**變量：存儲數(shù)據(jù)，方便使用和修改**

語法：
定義變量：@變量名: 值;
使用變量：CSS屬性：@變量名;

// 1. 定義
@fontColor：pink;
// 2. 使用
.box { color:@fontColor }
.a { color:@fontColor }

能夠使用Less導(dǎo)入寫法引用其他Less文件
思考：
? 開發(fā)網(wǎng)站時，網(wǎng)頁如何引入公共樣式？
?CSS：書寫link標簽
?Less：導(dǎo)入
導(dǎo)入: @import “文件路徑”;

方法一：
? 配置EasyLess插件， 實現(xiàn)所有Less有相同的導(dǎo)出路徑
配置插件： 設(shè)置 → 搜索EasyLess → 在setting.json中編輯 → 添加代碼（注意，必須是雙引號）

1  // out: ./css/
1  // out: ./css/common.css

禁止導(dǎo)出 : **
? 在less文件第一行添加: // out: false**

1  //out:false

實戰(zhàn)演練

準備工作：項目目錄及文件
根目錄（paradise / FC）

目標：實現(xiàn)在不同寬度設(shè)備中等比縮放的網(wǎng)頁效果
整體布局：網(wǎng)頁為灰色背景色

主體內(nèi)容
? 底部間距（高度與工具欄相同）

底部工具欄
?固定定位
?尺寸
?背景色