移動(dòng)適配

rem

rem設(shè)置網(wǎng)頁元素尺寸, 可以讓網(wǎng)頁元素根據(jù)屏幕寬度等比例縮放

rem單位

1. 相對單位
2. rem單位是相對于HTML標(biāo)簽的字號(hào)計(jì)算結(jié)果
3. 1rem = 1HTML字號(hào)大小
4. 要利用媒體查詢規(guī)定不同的屏幕寬度設(shè)置不同的根字號(hào)大?。黄聊粚挾鹊?/10

媒體查詢

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

書寫格式:
@media (媒體特性) {
選擇器 {
css屬性
}
}

rem.png

flexible js配合rem實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果
flexible.js是手淘開發(fā)出的一個(gè)用來適配移動(dòng)端的js框架。
核心原理就是根據(jù)不同的視口寬度給網(wǎng)頁中html根節(jié)點(diǎn)設(shè)置不同的font-size。

Less語法快速編譯生成CSS代碼

Less是一個(gè)CSS預(yù)處理器, Less文件后綴是.less
擴(kuò)充了 CSS 語言, 使 CSS 具備一定的邏輯性、計(jì)算能力

注意：瀏覽器不識(shí)別Less代碼，目前階段，網(wǎng)頁要引入對應(yīng)的CSS文件。

Less語法

1. 注釋:
   單行注釋
   語法：// 注釋內(nèi)容
   快捷鍵：ctrl + /
   塊注釋
   語法：/* 注釋內(nèi)容 */
   快捷鍵： shift + alt + A

2. 運(yùn)算:
   加法: +
   減法: -
   乘法: *
   除法: ./ 或 (a / b)

3. 嵌套:
   后代選擇器:

   
   
   less語法后代選擇器.png
   
   

   子代選擇器 > :

   
   
   less語法子代選擇器.png
   
   交集選擇器:
   
   less語法交集選擇器.png
   
   并集選擇器:
   
   less語法并集選擇器.png
   
   

   偽類選擇器:

   
   
   less語法偽類選擇器.png

添加偽元素:

less語法添加偽元素.png

變量 @變量名: 值;

能夠大大節(jié)約維護(hù)成本

聲明變量.png

less文件導(dǎo)入

@import "你要導(dǎo)入的文件路徑"
注意: less文件導(dǎo)入只能導(dǎo)入.less文件

less文件導(dǎo)入.png

less文件導(dǎo)出

out: ../css/
注意:
1.路徑如果表示文件夾，最后一定要有 " / "
2.屬于less配置信息，一定要寫在第一行，如果寫在第二行，那么第一行不能再寫任何內(nèi)容

禁止導(dǎo)出

out: false

壓縮導(dǎo)出css

compress:true,out:../css2/

節(jié)約成本，讓網(wǎng)頁渲染的更快
如果多個(gè)配置一起寫，配置與配置之間以英文逗號(hào)隔開