2、less 基礎
3、rem適配方案
rem 適配方案2
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 是一門非程式式語言，沒有變數、函式、scope（作用域）等概念。
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 」檢視版本即可
變數是指沒有固定的值，可以改變的。因為我們css中的一些顏色和數值等經常使用。
@變數名
:值;
@color
: pink;
easy less 外掛程式用來把less檔案編譯為css檔案
只要儲存一下less檔案，會自動生成css檔案。
// 將css改為less
#header .logo
#header
}
a:hover
a}
/*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**。
①假設設計稿是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、搭建檔案結構
3、設定視口標籤以及引入初始化樣式
"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
"stylesheet" href="css/normalize.css">
手機**團隊出的簡潔高效 移動端適配庫
我們再也不需要在寫不同螢幕的**查詢，因為裡面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適配布局
目標 之前我們使用flex布局實現移動web開發時，頁面基本上是固定的，而且無論是流式布局還是flex布局主要都是針對寬度進行的布局 如果想對高度，如布局可以隨著螢幕變化，寬 高同時進行等比例縮放，就要用到rem適配布局 rem單位 rem root em 是乙個相對單位，類似於em，em是父元素字...
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...