rem說明
rem是一個相對單位，類似em，em是 父元素字體大小 。不同的是rem的基準是相對於html元素的字體大小
比如：根元素（html）設置font-size：12px；非根元素設置width:2rem；則換成px表示就是24px。
媒體查詢
什麼是媒體查詢：媒體查詢是CSS3新語法
作用：
- 使用@media查詢，可以針對不同的媒體類型定義不同的樣式
- @media可以針對不同的屏幕尺寸設置不同的樣式
- 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面
- 目前針對很多蘋果手機，安卓手機，平板等設備都用的到多媒體查詢
語法規劃
書寫語法
<style>
@media mediatype and|not|only (media feature){
CSS-Code;
}
</style>
說明：
1. 用@media開頭，注意@符號
2. mediatype媒體類型 將不同的終端設備劃分成不同的類型，稱爲媒體類型
值：all（用於所有設備）| print（用於打印機和打印預覽）|scree（用於電腦屏幕，平板電腦，智能手機等）
3. 關鍵字and not only。關鍵字將媒體類型或多個媒體特性連接到一起作爲媒體查詢的條件。
值：and（可以將多個媒體特性連接到一起，相當於“且”的意思）| not （排除某個媒體類型，相當於“非”的意思，可以省略） | only （指定某個特定的媒體類型，可以省略）
4. media feature 媒體特性，必須要有小括號包含。每種媒體類型都具體各自不同的特性，根據不同的媒體類型的媒體特性設置不同的展示風格，暫且瞭解下面三個。
值：width （定義輸出設備中頁面可見區域的寬度）
min-width （定義輸出設備中頁面最小可見區域寬度）
max-width（定義輸出設備中頁面最大可見區域寬度）
例子：
<style>
//這句話的意思就是，在我們屏幕上並且最大寬度小於等於800像素，設置我們的背景顏色爲pink，當我們的屏幕最大寬度小於等於500像素時，背景顏色爲red
@media screen and (max-width:800px){
body{
background-color:pink;
}
@media screen and (max-width:500px){
body{
background-color:red;
}
}
</style>
遵循規則：
1. 媒體查詢一般按照從大到小或者從小到大的順序來寫。一般建議從小到大寫，這樣代碼更加簡潔
引入資源
說明：當樣式比較繁多的時候，我們可以針對不同的媒體使用不同的stylesheet是（樣式表），原理，就是直接在link中判斷設備的尺寸，然後引用不同的CSS文件
語法規範：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="css地址" />
案列：
//當我們屏幕大於等於640px以上的，我們讓div一排顯示，當小於640我們顯示兩排
<style>
<link rel="stylesheet" href="css地址" media="screen and (min-width:640px)"
</style>
rem適配方案
- 讓一些不能等比自適應的元素，達到當設備尺寸發生改變的時候，等比例適配當前設備
- 使用媒體查詢根據不同設備按比例設置html的字體大小，然後頁面元素使用rem做尺寸單位，當html字體大小變化元素尺寸也會發生變化，從而達到等比縮放的適配
Less基礎
Less安裝
- 首先安裝node.js
- 檢查是否安裝成功，可以使用cmd命令輸入 node -v 查看版本
- 基於node.js 在線安裝Less，使用cmd命令 sudo npm install -g less
- 檢查是否安裝成功，使用cmd命令 lessc -v 查看版本即可
Less變量
語法：@變量名：值；
命名規範
- 必須有@爲前綴
- 不能以數字開頭，不能包含特殊字符
- 區分大小寫
- Less的編譯需要安裝插件 sublime可以百度less編譯 vscode可以安裝easy Less插件
Less運算符
- 運算符中間左右有個空格隔開
- 對於兩個不同的單位的值質檢的運算，運算結果的值取第一個值的單位
- 如果兩個值質檢只有一個值有單位，則運算結果就取該單位
rem實際開發適配方案
第一種方案
元素大小取值方法：
一般頁面元素值取750px 劃分爲15份，font-size取50
- 最後的公式：頁面元素的rem值 = 頁面元素值（px） / (屏幕寬度/劃分的份數)
- 屏幕寬度/劃分的份數就是html font-size的大小
- 或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小
第二種方案
flexible.js適配方案 下載地址：https://github.com/amfe/lib-flexible
px轉rem插件
需要給vscode安裝一個插件 cssrem 安裝後修改配置項，默認轉換的大小爲16我們需要修改成自己的大小，一般設置75