1. rem 基礎
rem 是一個相對單位，類似於 em ，em 是父元素字體大小。
em 是相對於父元素 的字體大小來說的
rem 是相對於 html 元素 字體大小來說的
rem 優點 就是可以通過修改 html 里面的文字大小來改變頁面中元素的大小可以整體控制
比如：根元素（html ）設置的 font-size=12px；非根元素設置 width：2rem；則換成px 表示 24px（12px*2rem）
2. 媒體查詢（@media）
@media 可以針對不同的屏幕尺寸設置不同的樣式
語法規范：
@media mediatype and | not | only (media feature){
CSS - Code;
}
- 用 @media 開頭
- mediatype 媒體類型
all：用於所有設備，
print：用於打印機和打印預覽，
screen：用於電腦屏幕，平板電腦，手機等
- 關鍵字 and not only
and：可以將多個媒體特性連接到一起，相當於“且”的意思
not：排除某個媒體類型，相當於“非”的意思，可以省略
only：指定某個特定的媒體類型，可以省略
- media feature 媒體特性 必須有小括號包含
width：定義輸出設備中頁面可見區域的寬度
max-width：定義輸入設備中頁面最大可見區域寬度
min-width：定義輸入設備中頁面最小可見區域寬度
案例：
@media screen and（max-width：500px）{
body{
background:pink;
}
}
注意點：
1. screen 還有 and 必須帶上，不能省略
2. 小括號中的 數字 后面必須跟單位，970px 這個 px 不能省略
3. 媒體查詢最好的方法就是從小到大
3. 媒體查詢 + rem 實現元素動態大小變化
rem 單位是跟着 html 來走的，有了 rem 頁面元素可以設置不同大小尺寸
媒體查詢可以根據不同設備寬度來修改樣式
媒體查詢 + rem 就可以實現不同設備寬度，實現頁面元素大小的動態變化
4. 引入資源（理解）
當樣式比較繁多的時候，可以針對不同的媒體使用不同 stylesheet（樣式表）。
原理，直接在 link 中判斷設備的尺寸，然后引入不同的css文件。
語法規范：
<link rel = "stylesheet" media = "mediatype and | not | only (media feature)" href = " style.css" >
案例：
<link rel = "stylesheet" media = "screen and （min-width:320px）" href = " style320.css" >
<link rel = "stylesheet" media = "screen and （min-width:640px）" href = " style640.css" >
5. Less基礎
Less 變量：變量是指沒有固定的值，可以改變的，因為CSS中的一些顏色和數值等經常使用，樣式后綴名.less 。
@變量名：值；
1. 變量名規范
- 必須有 @ 為前綴
- 不能包含特殊字符
- 不能以數字開頭
- 大小寫敏感
案例：
@color：pink；// 定義變量
body{
color：@color； // 使用變量
}
2. 編譯
通過vscode中的插件 Easy LESS 編譯為 css 文件，只要保存一下 Less 文件，會自動生成 CSS文件
3. Less 嵌套
1.內層選擇器的前面沒有 & 符號，則它被解析為父選擇器的后代
CSS中選擇器嵌套：
#header .logo{
width:10px;
}
Less 嵌套寫法：
#header{
.logo{
width:10px;
}
}
2. 如果有 & 符號，它就被解析為父元素自身或父元素的偽類（交集|偽類|偽元素選擇器）
CSS中選擇器嵌套：
a:hover{
color:red;
}
Less 嵌套寫法：
a{
&：hover{
color:red;
}
}
3.Less 運算
less 中運算 可以使用 加（+），減（-），乘（*），除（/）四種運算
運算符中間左右有個空格隔開 1px + 5
對於兩個值之間只有一個值有單位，則運算結果就取該單位
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位
案例：
@font：50px；
@border：5px +5；
div{
width：200px - 50；
height：200px * 2；
border：@border solid #ccc;
img{
width:82rem / @font; //1.65rem
}
}
6.rem 兩種適配方式
技術方案1 ：less + 媒體查詢 + rem
技術方案2：flexible.js + rem（推薦）
方式一：（rem + less + 媒體查詢）
1.動態設置 html 標簽 font-size 大小
① 假設設計稿是 750px
② 假設整個屏幕划分為 15 等分（划分標准不一，可以是20份，也可以是10份）
③ 每一份作為 html 字體大小，這里就是 50px
④ 在320px 設備的時候，字體大小為 320 / 15 就是21.33px
⑤ 用頁面元素的大小 除以不同的 html 字體大小 會發現他們的比例還是相同的
⑥ 比如 以 750px 為標准設計稿
⑦ 一個 100*100像素的頁面元素在 750 屏幕下，就是 100 / 50 轉換為 rem 是 2rem * 2rem 比例是1:1
⑧ 320 屏幕下，html字體大小為 21.33 則 2rem = 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是1:1
⑨ 但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果。
原理總結：先拿一個標准的稿件（750px）來算出 rem 值，剩下的屏幕，只要把html的文字大小的值算出來，就可以等比例縮放。
算法：（元素大小取值方法）
① 最后的公式：頁面元素的 rem 值 = 頁面元素（px） / （屏幕寬度 / 划分的份數）；// 100px / ( 750px / 15 )；
② 屏幕寬度 / 划分的份數 就是 html font-size 的大小
③ 或者 ： 頁面元素的 rem 值 = 頁面元素值（px）/ html font-size 字體大小
2. import 導入樣式
語法：
@import “common”； // 在新的 index.less 中 導入 common.less 文件
注意：
@import 導入的意思，可以把一個樣式文件導入到另外一個樣式文件里面
link 是把一個 樣式文件引入到 html 頁面里面
7. 方式二：（flexible.js + rem 適配）
1. 插件安裝（cssrem）
1. VSCode 安裝 cssrem 插件，可以實現 px 轉換為 rem 的操作
2. 設置 —>setting.json —> cssroot 把字體大小設置為 75（因為稿件是750px，有划分了10等份）
3. 保存 重啟 VSCode
2. 簡潔高效的 rem 適配方案 flexible.js
手機淘寶團隊出的簡潔高效 移動端適配庫
再也不需要寫不同屏幕的媒體查詢，因為里面 js 做了處理
他的原理是把當前設備划分為 10 等份，但是不同設備下，比例還是一致的
我們要做的，就是確定好我們當前設備的html文字大小就可以
比如當前設計稿是 750px， 那么我們只需要把 html 文字大小設置為 75px（750px / 10）就可以
里面頁面元素 rem 值：頁面元素的px值 / 75
剩余的，讓 flexible.js 來計算
3. 需要強制設定屏幕超過750px ，就按照 750px 的設計稿來設計，不會讓頁面超過 750px
@media screen and （min-width：750px）{ // 屏幕大於等於750px 的情況下
html{
font-size：75px !important; //提升權重
}
}