rem適配

目標(biāo)：實現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果

rem和px的不同：
rem: 網(wǎng)頁元素尺寸單位,可以根據(jù)屏幕寬度的不同，實現(xiàn)網(wǎng)頁元素尺寸不同（等比縮放）
px: 屬于絕對單位，不會根據(jù)屏幕寬度不同而等比縮放

目標(biāo)的實現(xiàn)方法：
1，rem：是目前多數(shù)企業(yè)在用的解決方案
2，vw / vh：未來的解決方案

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

rem單位尺寸：

1. 根據(jù)視口寬度，設(shè)置不同的HTML標(biāo)簽字號
2. 書寫代碼，尺寸是rem單位
   2.1 確定設(shè)計稿對應(yīng)的設(shè)備的HTML標(biāo)簽字號

查看設(shè)計稿寬度 → 確定參考設(shè)備寬度(視口寬度) → 確定基準(zhǔn)根字號（1/10視口寬度）
2.2 rem單位的尺寸
N * 37.5 = 68 → N = 68 / 37.5 （移動設(shè)備寬度375px）
rem單位的尺寸 = px單位數(shù)值 / 基準(zhǔn)根字號

rem.jpg

rem移動適配 - 媒體查詢

目標(biāo)：媒體查詢能夠檢測視口的寬度，然后編寫差異化的 CSS 樣式
寫法：
@media （媒體特性） {
選擇器 {
css屬性
}
}

@media (width:375px) {
html {
font-size: 37.5px;
}
}

由于移動設(shè)備很多，無法每個通過媒體查詢一個一個寫出來
所以使用flexible.js配合rem實現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果

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

flexible.jpg

less

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

如何使用Less語法快速編譯生成CSS代碼
Easy Less：
1，vscode插件
2，作用：less文件保存自動生成css文件

EasyLess.jpg

less語法

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

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

二，運(yùn)算
加、減、乘直接書寫計算表達(dá)式
除法需要添加 小括號
注意點(diǎn)：
1,單位沒有順序之分,如果一個表達(dá)式之中有多個單位,以第一個單位為準(zhǔn)
2,運(yùn)算符的前后,要么都加空格隔開,要么都不加

less運(yùn)算.jpg

三，嵌套
嵌套寫法：
1.生成后代選擇器
.box {
width: 200px;
height: 200px;

.title {
    background-color: #ff0;

    .left {
        margin-left: 100px;
    }
}

}

2.生成子代選擇器 >
.father {
background-color: aqua;

> .son {
   background-color: orange;

    > .sun {
        background-color: red;
    }
}

}

3.交集選擇器 &符號指代的是直接上級
.box {
background-color: #ff0;
&.box1{
background-color: aqua;
}
}

4.并集選擇器
.box {
&,.box1{
background-color: red;
}
}

5.偽類選擇器 :hover
.box {
a:hover {
background-color: #ff0;
}

a {
    &:hover {
        background-color: #ff0;
    }
}

li:hover {
    a {
        background-color: #ff0;
    }
}

li {
    &:hover {
        a {
            background-color: #ff0;
        }
    }
}

}

6.添加偽元素
.box {
img::before {
content: '';
}

img {
    &::before {
        content: '';
    }
}

}

7.結(jié)構(gòu)偽類選擇器 直接寫在選擇器的后面是沒有提示的
.box {
li:first-child {
margin: 0 auto;
}

li {
    &:first-child {
        margin: 0 auto;
    }
}

}

四，變量
變量 @變量名: 值;
作用：節(jié)約維護(hù)成本
變量名看做是一個存值的容器
寫法：
@themeColor: blue;

body {
background-color: @themeColor;
}

.header {
background-color: @themeColor;

p {
    background-color: @themeColor;
}

a {
    background-color: @themeColor;
}

}

五，導(dǎo)入
寫法：
@import url(你要導(dǎo)入的文件路徑);
@import '你要導(dǎo)入的文件路徑';

六，導(dǎo)出
// out: ../css/
注意點(diǎn):
1,路徑如果表示文件夾,結(jié)尾一定要有/
2,屬于less配置信息,一定要寫在第一行,如果寫在第二行,那么第一行不能再學(xué)任何內(nèi)容

七，壓縮導(dǎo)出
語法：
// compress:true
作用：節(jié)約成本,讓網(wǎng)頁渲染的更快

// compress:true,out:../css2/
注意：如果多個配置一起寫,配置與配置之間以英文逗號隔開