rem單位
rem (root em)是乙個相對單位，類似於em，em是父元素字型大小。
不同的是rem的基準是相對於html元素的字型大小。
比如，根元素（html）設定font-size=12px; 非根元素設定width:2rem; 則換成px表示就是24px。
/* 根html 為 12px */
html
/* 此時 div 的字型大小就是 24px */
div
什麼是**查詢
**查詢（media query）是css3新語法。
**查詢語法規範
@media mediatype and|not|only (media feature) 將不同的終端裝置劃分成不同的型別，稱為**型別
關鍵字將**型別或多個**特性連線到一起做為**查詢的條件。
**特性
每種**型別都具體各自不同的特性，根據不同**型別的**特性設定不同的展示風格。我們暫且了解三個。
注意他們要加小括號包含
**查詢書寫規則
注意： 為了防止混亂，**查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡的還是從小到大來寫，這樣**更簡潔
維護css弊端
css 是一門非程式式語言，沒有變數、函式、scope（作用域）等概念。
less 介紹
less（leanerstyle sheets 的縮寫）是一門 css擴充套件語言，也成為css預處理器。
做為 css的一種形式的擴充套件，它並沒有減少css的功能，而是在現有的css語法上，為css加入程式式語言的特性。
它在css 的語法基礎之上，引入了變數，mixin（混入），運算以及函式等功能，大大簡化了 css 的編寫，並且降低了 css的維護成本，就像它的名稱所說的那樣，less可以讓我們用更少的**做更多的事情。
less中文**：http://
less
css.cn/
常見的css預處理器：sass、less、stylus
一句話：less是一門 css 預處理語言，它擴充套件了css的動態特性。
less安裝
①安裝nodejs，可選擇版本(8.0)，**：
②檢查是否安裝成功，使用cmd命令（win10是window+r 開啟執行輸入cmd） —輸入「node –v」檢視版本即可
④檢查是否安裝成功，使用cmd命令「 lessc -v 」檢視版本即可
less 使用之變數
變數是指沒有固定的值，可以改變的。因為我們css中的一些顏色和數值等經常使用。
@變數名:值;@color: pink;easy less 外掛程式用來把less檔案編譯為css檔案
只要儲存一下less檔案，會自動生成css檔案。
// 將css改為less
#header .logo
#header
}
a:hover
a}
任何數字、顏色或者變數都可以參與運算。就是less提供了加（+）、減（-）、乘（*）、除（/）算術運算。
/*less 裡面寫*/
@witdh: 10px + 5;
div
/*生成的css*/
div
/*less 甚至還可以這樣 */
width: (@width + 5) * 2;
2.使用**查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸單位，當html字型大小變化元素尺寸也會發生變化，從而達到等比縮放的適配。
技術方案：
1.less+rem+**查詢
2.lflexible.js+rem
總結：兩種方案現在都存在。
方案2 更簡單，現階段大家無需了解裡面的js**。
rem實際開發適配方案1
①假設設計稿是750px
②假設我們把整個螢幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）
③每乙份作為html字型大小，這裡就是50px
④那麼在320px裝置的時候，字型大小為320/15就是 21.33px
⑤用我們頁面元素的大小除以不同的 html字型大小會發現他們比例還是相同的
⑥比如我們以750為標準設計稿
⑦乙個100100畫素的頁面元素在 750螢幕下， 就是 100/ 50 轉換為rem 是 2rem2rem 比例是1比1
⑧320螢幕下， html字型大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1
⑨但是已經能實現不同螢幕下 頁面元素盒子等比例縮放的效果
總結：①最後的公式：頁面元素的rem值 = 頁面元素值（px） / （螢幕寬度 / 劃分的份數）
②螢幕寬度/劃分的份數就是 htmlfont-size 的大小
③或者：頁面元素的rem值 = 頁面元素值（px） / html font-size 字型大小
1、 技術選型
方案：我們採取單獨製作移動頁面方案
技術：布局採取rem適配布局（less + rem + **查詢）
設計圖： 本設計圖採用 750px 設計尺寸
2、搭建檔案結構
手機**團隊出的簡潔高效 移動端適配庫
我們再也不需要在寫不同螢幕的**查詢，因為裡面js做了處理
它的原理是把當前裝置劃分為10等份，但是不同裝置下，比例還是一致的。
我們要做的，就是確定好我們當前裝置的html 文字大小就可以了
比如當前設計稿是 750px， 那麼我們只需要把 html 文字大小設定為 75px(750px / 10) 就可以
裡面頁面元素rem值： 頁面元素的px 值 / 75
剩餘的，讓flexible.js來去算
總結：因為flexible是預設將螢幕分為10等分
但是當螢幕大於750的時候希望不要再去重置html字型了
所以要自己通過**查詢設定一下
並且要把權重提到最高
vscode px 轉換rem 外掛程式 cssrem
因為cssrem中css自動轉化為rem是參照預設外掛程式的16轉換的所以需要自己配置
移動web開發之rem布局
理論基礎 什麼是rem?fontsize of the root elelment 說白了就是字型單位，是指相對於根元素的字型大小的單位。rem的優點 相對於流式布局 響應式布局等布局方式，rem更為靈活，可以根據根不同螢幕尺寸上的根元素來等比例適配。rem的基準值 根元素的字型大小 而網頁的根元素...
03 移動WEB開發 rem布局
rem root em 是乙個相對單位 and not only 關鍵字 media feature 特性，必須用小括號包含 示範 media mediatype and not only media feature media screen and max width 640px 當螢幕大於320...
移動Web開發 rem布局 less
rem單位 rem root em 是乙個相對單位，是相對於html元素的字型大小 media可以針對不同的螢幕尺寸設定不同的樣式 media mediatype and 1.查詢型別 2.關鍵字 3.特性 4.查詢書寫規則 為了防止混亂，查詢我們要按照從小到大或者從大到小的順序來寫,但是我們最喜歡...