移動端rem適配方案（flexible.js）
需要了解的基礎知識：
-
物理像素：物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。正是這些設備像素的微小距離欺騙了我們肉眼看到的圖像效果。
-
設備獨立像素：也稱爲密度無關像素，可以認爲是計算機座標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然後由相關係統轉換爲物理像素。
-
設備像素比：簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。它的值可以按此公式計算得到：設備像素比 ＝ 物理像素 / 設備獨立像素 （安卓一般爲：1；iPhone爲2或者3）
-
visual viewport：可見視口，即屏幕寬度；
-
layout viewport：佈局視口，即DOM寬度；
-
idea viewport：理想適口，使佈局視口就是可見視口；
-
設備寬度（visual viewport）與DOM寬度（layout viewport），scale的關係是：（visual viewport）= （layout viewport）* scale
-
獲取屏幕寬度的尺寸：window. innerWidth/Height
-
獲取DOM寬度的尺寸：document. documentElement. clientWidth/Height
-
viewport的meta標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
initial-scale：‘設置頁面的初始縮放值，爲一個數字，可以帶小數’；
maximum-scale：‘允許用戶的最大縮放值，爲一個數字，可以帶小數’；
user-scalable：‘是否允許用戶進行縮放，值爲"no"或"yes", no 代表不允許，yes代表允許’； -
**flexible.js：**手機淘寶團隊的熱門適配方案
源碼解析：
// 首先是一個立即執行函數，執行時傳入的參數是window和document
(function flexible (window, document) {
var docEl = document.documentElement // 返回文檔的root元素
var dpr = window.devicePixelRatio || 1
// 獲取設備的dpr，即當前設置下物理像素與虛擬像素的比值
// 調整body標籤的fontSize，fontSize = (12 * dpr) + 'px'
// 設置默認字體大小，默認的字體大小繼承自body
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
// 設置root元素的fontSize = 其clientWidth / 10 + ‘px’
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// 當我們頁面尺寸大小發生變化的時候，要重新設置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我們重新加載頁面觸發的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是說如果這個頁面是從緩存取過來的頁面，也需要從新計算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// 檢測0.5px的支持，支持則root元素的class中有hairlines
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
不想看原理可以直接看這裏按步驟使用即可
1. 在index.html文件使用CDN引入flexible.js文件。
// 引用地址
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>
下面的這個meta標籤 頁面不要設定， Flexible會自動設定每個屏幕寬度的根font-size、動態viewport、針對Retina屏做的dpr。
// 這個標籤不要設定！！！
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> -->
2. 把視覺稿中的px轉換成rem
一般UI給我們的稿子大小是750的。就以這個爲例子：在flexible.js中，把750px分爲10份，1rem 爲 75px。所以font-size的基準值爲75px；
css換算成rem公式爲: px值 / 75 = rem, 例如：100px=100/75=1.33rem
但是這樣一來計算起來就非常的複雜。那麼我們在日常開發中怎麼快速計算呢，這裏我說下我常用的編譯器VScode 它裏面有個插件叫cssrem，用它就可以在我們輸入px值後自動轉換rem。
安裝方法如下：
①：安裝插件
②：修改配置參數
當設計圖爲750時在下圖中這裏填寫75
root font-size (unit: px), default: 16
這代表根字體大小，默認是16px，即1rem = 16px,我們這裏把他改爲75。
cssrem.fixedDigits px轉rem小數點最大長度，默認：6。
③：修改完參數後我們只要輸入px值插件就會自動算出rem值，效果如下圖：
最後說下最近看了不少這方面的博客文章，我這也只是把大家寫的文章綜合起來自己跟着走了幾遍，試驗了不少方法然後弄出來的，如果有哪些錯誤的地方希望大夥能幫我指出來，謝謝！