rem單位
- rem是一個相對單位，類似於em，但和em是有區別的。
- em是相對與父元素的字體大小來說的。
- rem是相對於html元素的字體大小來說的。
- 優點：rem可以通過修改html裏面的文字大小來整體控制頁面中元素的字體大小。
媒體查詢
- @media可以針對不同的屏幕尺寸設置不同的樣式，當重置瀏覽器大小時，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
媒體查詢的語法格式如下：
@media not|only mediatype and (media feature) {
CSS 代碼...;
}
注意：
1、mediatype是媒體類型；and not only是關鍵字（作用是將媒體類型與媒體特性或媒體特性與媒體特性連接到一起作爲查詢到條件）；media feature是媒體特性，必須用小括號包含），具體說明見下表：
2、媒體查詢一般按照從大到小或者從小到大的順序，但從小到大的順序會使代碼更簡介
| 值 | 說明 |
|---|---|
| all | 默認值，用於所有設備 |
| 用於打印機和打印預覽 | |
| screen | 用於電腦屏幕、平板電腦、智能手機等 |
| 值 | 說明 |
|---|---|
| and | 可以將多個媒體特性連接到一起，相當於“且”的意思（只有當每個屬性都爲真時，這條查詢的結果才爲真）。例子如下： @media all and (min-width: 700px) and (max-width:900px) { … } 在不使用not或only操作符的情況下，媒體類型是可選的，默認爲all。所以可以寫成： @media (min-width: 700px) and (max-width:900px) { … } |
| not | 排除某個媒體類型，可以省略。例子如下： @media not all and (max-width:900px) { … } |
| only | 指定某個特定的媒體類型，可以省略。 |
| or | 將多個媒體查詢以逗號分隔放在一起；只要其中任何一個爲真，整個媒體語句就返回真，相當於or操作符。例子如下： @media (min-width: 700px), screen and (orientation: landscape) { … } |
| 值 | 說明 |
|---|---|
| width | 定義輸出設備中頁面可見域的寬度 |
| min-width | 定義輸出設備中頁面最小可見域的寬度 |
| max-width | 定義輸出設備中頁面最大可見域的寬度 |
- 引入資源：簡單說就是針對不同的屏幕尺寸，調用不同的css文件。
/*引入資源的語法格式如下：*/
<link rel="stylesheet" media="screen and (min-width: 320px) href="XXX.css">
rem適配方案
- 目前主流的rem適配方案有以下兩種：
-
rem + less + 媒體查詢
該適配方案中設計稿基本以750px爲準，並且，頁面元素的rem值 = 頁面元素值（px）/（屏幕寬度 / 劃分的份數）
-
rem +flexible.js（更加推薦）
VSCode有一個插件“cssrem”可以實現px單位轉換爲rem單位。該插件設置html字體大小基準值上步驟如下：（1）打開設置，可以通過“ctrl+逗號”快捷鍵打開；（2）打開右上角的“settings.json“；（3）輸入”cssrem"；（4）點擊“編輯”按鈕；（5）修改基準值；（6）重啓VSCode。
微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！
