• 移動適配

1.長度單位

網(wǎng)頁效果
屏幕寬度不同豫领，網(wǎng)頁元素尺寸不同（等比縮放）

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

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

rem單位: 相對單位
rem單位是相對于HTML標(biāo)簽的字號計(jì)算結(jié)果
1rem = 1HTML字號大小

2.媒體查詢

思考:
手機(jī)屏幕大小不同爵赵，分辨率不同，如何設(shè)置不同的HTML標(biāo)簽字號泊脐？
解決方案: 媒體查詢

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

語法:

媒體查詢語法.jpg

例子:

媒體查詢例子.jpg

視口寬度要去瀏覽器檢查html的寬度,檢查的寬度是多少就寫多少

3.rem移動適應(yīng)

設(shè)備寬度不同，HTML標(biāo)簽字號設(shè)置多少合適容客？
設(shè)備寬度大秕铛，元素尺寸大
設(shè)備寬度小，元素尺寸小

目前rem布局方案中缩挑，將網(wǎng)頁等分成10份但两，HTML標(biāo)簽的字號為視口寬度的1/10

適配移動端過程：

1. 要利用媒體查詢規(guī)定不同的屏幕寬度設(shè)置不同的根字號大小供置；屏幕寬度的1/10
2. 頁面元素就可以使用rem相對單位谨湘，1rem=1html文字大小

rem單位尺寸

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

4.flexible

思考：檢測了3個(gè)視口紧阔，需要分別設(shè)置相應(yīng)的根字號，有什么弊端嗎续担？
答：手機(jī)設(shè)備多擅耽，屏幕尺寸不一，視口不僅僅有這3個(gè)

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

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

使用方法:

flexible.js使用.jpg

• less語法

思考：在px單位轉(zhuǎn)換到rem單位過程中挎挖，哪項(xiàng)工作是最麻煩的？
答：除法運(yùn)算航夺。CSS不支持計(jì)算寫法蕉朵。
解決方案：可以通過Less實(shí)現(xiàn)。

Less是一個(gè)CSS預(yù)處理器, Less文件后綴是.less
擴(kuò)充了CSS 語言, 使CSS具備一定的邏輯性阳掐、計(jì)算能力始衅。
注意：瀏覽器不識別Less代碼，目前階段缭保，網(wǎng)頁要引入對應(yīng)的CSS文件汛闸。

Easy Less:
vscode插件
作用：less文件保存自動生成css文件
注意: 有重大語法錯(cuò)誤不會生成css文件
用法: 安裝插件后直接新建后綴名為.less的文件即可

1.注釋

單行注釋
語法：//注釋內(nèi)容
快捷鍵：ctrl+/

塊注釋
語法：/* 注釋內(nèi)容*/
快捷鍵：shift+alt+A

注意:
單行注釋，不會編譯到css文件中的
塊注釋艺骂，是會編譯在css中

2.計(jì)算

語法:

計(jì)算.jpg

例子:

例子.jpg

3.嵌套

后代選擇器:

后代選擇器.jpg

子代選擇器:

子代選擇器.jpg

交集選擇器:

交集選擇器.jpg

并集選擇器:

并集選擇器.jpg

偽類選擇器:

偽類選擇器.jpg

添加偽元素:

添加偽元素.jpg

結(jié)構(gòu)偽類選擇器:

結(jié)構(gòu)偽類選擇器.jpg

4.變量

語法:

變量用法.jpg

5.導(dǎo)入

語法:

導(dǎo)入.jpg

6.導(dǎo)出

默認(rèn)情況下,less導(dǎo)出的css文件和less文件處于同一個(gè)文件夾中
想分離的可以利用導(dǎo)出語法

語法:

導(dǎo)出.jpg

注意:
上面的語法只是設(shè)置當(dāng)前l(fā)ess文件導(dǎo)出,要所有l(wèi)ess文件都導(dǎo)出要設(shè)置easy less插件

設(shè)置easy less插件: 實(shí)現(xiàn)所有Less文件有相同的導(dǎo)出路徑
設(shè)置→搜索EasyLess→在setting.json中編輯→添加代碼（注意诸老，必須是雙引號）
代碼:
"out":"../css/"

配置easy less插件.jpg

7.禁止導(dǎo)入

不是所有l(wèi)ess文件都需要導(dǎo)出為css文件的,可以設(shè)置禁止導(dǎo)出,在less文件第一行添加: //out: false

禁止導(dǎo)出.jpg

8.壓縮導(dǎo)出

語法:
// compress:true
作用: 節(jié)約成本，讓網(wǎng)頁渲染的更快
注意: 如果多個(gè)配置一起寫钳恕，配置與配置之間以英文逗號隔開
例如: // compress:true,out:../css2/

• 補(bǔ)充

1.單詞

單詞匯總.jpg

2.每日一句鼓勵自己的話：

努力的最大動力别伏，在于你可以選擇你想要的生活蹄衷，而不是被生活選擇。