rem適配佈局（rem+less+媒體查詢 和 rem+flexible.js）

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;    //提高權重

　　　　}

　　}