需要了解的基礎知識：

物理畫素：物理畫素又被稱為裝置畫素，他是顯示裝置中一個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。正是這些裝置畫素的微小距離欺騙了我們肉眼看到的影象效果。

裝置獨立畫素：也稱為密度無關畫素，可以認為是計算機座標系統中的一個點，這個點代表一個可以由程式使用的虛擬畫素(比如說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值，效果如下圖：

到此這篇關於flexible.js實現移動端rem適配方案的文章就介紹到這了,更多相關flexible.js 移動端rem適配內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！