移動(dòng)適配

1.rem ： 目前多數(shù)企業(yè)在用的解決方案；
2.vw / vh：未來(lái)的解決方案。

rem

1.rem單位：相對(duì)單位、rem單位是相對(duì)于HTML標(biāo)簽的字號(hào)計(jì)算結(jié)果。
2.1rem = 1HTML字號(hào)大小。

rem移動(dòng)適配 - 媒體查詢(xún)

1.媒體查詢(xún)能夠檢測(cè)視口的寬度，然后編寫(xiě)差異化的 CSS 樣式；
2.當(dāng)某個(gè)條件成立, 執(zhí)行對(duì)應(yīng)的CSS樣式；
語(yǔ)法如下：

媒體查詢(xún).png

媒體查詢(xún)2.png

3.目前rem布局方案中，將網(wǎng)頁(yè)等分成10份， HTML標(biāo)簽的字號(hào)為視口寬度的 1/10；

網(wǎng)頁(yè)10等份.png

4.rem單位尺寸
1.根據(jù)視口寬度，設(shè)置不同的HTML標(biāo)簽字號(hào)；
2.書(shū)寫(xiě)代碼，尺寸是rem單位
2.1 確定設(shè)計(jì)稿對(duì)應(yīng)的設(shè)備的HTML標(biāo)簽字號(hào)
查看設(shè)計(jì)稿寬度 → 確定參考設(shè)備寬度(視口寬度) → 確定基準(zhǔn)根字號(hào)（1/10視口寬度）
2.2 rem單位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem單位的尺寸 = px單位數(shù)值 / 基準(zhǔn)根字號(hào)

flexible js

1.flexible.js是手淘開(kāi)發(fā)出的一個(gè)用來(lái)適配移動(dòng)端的js框架。
2.核心原理就是根據(jù)不同的視口寬度給網(wǎng)頁(yè)中html根節(jié)點(diǎn)設(shè)置不同的font-size。

Less

1.使用Less運(yùn)算寫(xiě)法完成px單位到rem單位的轉(zhuǎn)換
2.CSS不支持計(jì)算寫(xiě)法，可以通過(guò)Less實(shí)現(xiàn)。
3.Less是一個(gè)CSS預(yù)處理器, Less文件后綴是.less
4.擴(kuò)充了 CSS 語(yǔ)言, 使 CSS 具備一定的邏輯性、計(jì)算能力。
注意：瀏覽器不識(shí)別Less代碼，目前階段，網(wǎng)頁(yè)要引入對(duì)應(yīng)的CSS文件。

Easy Less

1.vscode插件
2.作用：less文件保存自動(dòng)生成css文件
注釋?zhuān)?br> 單行注釋
語(yǔ)法：// 注釋內(nèi)容
快捷鍵：ctrl + /
塊注釋
語(yǔ)法：/* 注釋內(nèi)容 */
快捷鍵： shift + alt + A

Less運(yùn)算

運(yùn)算：
1.加、減、乘直接書(shū)寫(xiě)計(jì)算表達(dá)式
2.除法需要添加 小括號(hào) 或 .

less運(yùn)算.png

Less語(yǔ)法

1.Less嵌套

嵌套.png

2.Less變量
語(yǔ)法：
定義變量：@變量名: 值;
使用變量：CSS屬性：@變量名;

變量.png

3.Less導(dǎo)入
語(yǔ)法：@import “文件路徑”;

導(dǎo)入.png

4.Less導(dǎo)出
Less文件第一行添加如下代碼, 注意文件夾名稱(chēng)后面添加 /

導(dǎo)出.png

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

禁止導(dǎo)出.png