1. rem適配方案
- 目標：讓一些不能等比例適配的元素達到當設備尺寸發生改變的時候，等比例適配當前的設備。
- 方法：使用媒體查詢更具不同的設備安裝比例設置html字體大小，然后頁面元素使用rem做尺寸單位，當html字體變化的時候，元素尺寸也會發生變化，從而達到等比縮放的適配。
1.1 實際開發適配方案
- 按照設計稿與設備寬度的比例，動態計算並設置html根標簽的font-size大小（手段：媒體查詢）
- css中，設計稿元素的寬、高、相對位置等取值，按同等比例換算為rem為單位的值。
1.2 適配方案技術使用（主流）
- 技術方案1：less、媒體查詢、rem
- 技術方案2(推薦)：flexible.js、rem
上述兩種方案都存在，方案2更簡單，現階段無需了解里面的js代碼。
2. 適配方案1：rem+媒體查詢+less技術
2.1 設計稿常見尺寸寬度
一般情況下，我們以一套或者兩套效果圖適應大部分屏幕，放棄極端屏或者對其優雅降級，犧牲一些效果，現狀基本以750px為准。
2.2 動態設置html標簽font-size大小
- 假設設計稿是750px
- 假設我們把屏幕划分為15等分（划分標准不一，可以是10等分也可以是20等分）
- 每一份作為html字體大小，這里是50px
- 那么在320px設備的時候，字體大小為320/15，也就是21.33px,到這里就已經實現了不同屏幕的文字大小不一樣。
- 我們用頁面元素的大小除以不同的html字體大小，就會發現它們的比例還是相同的
驗證：
@media screen and (min-width: 320px) {
html {
/* 在320像素的屏幕下 */
font-size: 21.33px;
}
}
@media screen and (min-width: 750px) {
html {
/* 在750像素的屏幕下 */
font-size: 50px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1.首先選一套標准尺寸750為准 */
/* 2. 用屏幕尺寸 除以 我們划分的份數 得到html里面的文字大小 但是我們知道不同屏幕下得到的文字大小是不一樣的 */
/* 3. 頁面元素的rem值=頁面元
2.3元素大小取值方法
公式：
頁面元素的rem值=頁面元素px值（屏幕px寬度/划分份數）
屏幕寬度/划分份數=html的font-size的大小
或者：頁面元素的rem值=頁面元素值px/html的font-size的大小