需要了解的基礎(chǔ)知識(shí)：

物理像素：物理像素又被稱為設(shè)備像素，他是顯示設(shè)備中一個(gè)最微小的物理部件。每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度。正是這些設(shè)備像素的微小距離欺騙了我們?nèi)庋劭吹降膱D像效果。

設(shè)備獨(dú)立像素：也稱為密度無關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說CSS像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

設(shè)備像素比：簡(jiǎn)稱為dpr，其定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系。它的值可以按此公式計(jì)算得到：設(shè)備像素比 ＝ 物理像素 / 設(shè)備獨(dú)立像素 （安卓一般為：1；iPhone為2或者3）

visual viewport：可見視口，即屏幕寬度；

layout viewport：布局視口，即DOM寬度；

idea viewport：理想適口，使布局視口就是可見視口；

設(shè)備寬度（visual viewport）與DOM寬度（layout viewport），scale的關(guān)系是：（visual viewport）= （layout viewport）* scale

獲取屏幕寬度的尺寸：window. innerWidth/Height

獲取DOM寬度的尺寸：document. documentElement. clientWidth/Height

viewport的meta標(biāo)簽

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

• initial-scale：‘設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)'；
• maximum-scale：‘允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)'；
• user-scalable：‘是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許'；

**flexible.js：**手機(jī)淘寶團(tuán)隊(duì)的熱門適配方案

源碼解析：

// 首先是一個(gè)立即執(zhí)行函數(shù)，執(zhí)行時(shí)傳入的參數(shù)是window和document
(function flexible (window, document) {
 var docEl = document.documentElement // 返回文檔的root元素
 var dpr = window.devicePixelRatio || 1 
 // 獲取設(shè)備的dpr，即當(dāng)前設(shè)置下物理像素與虛擬像素的比值

 // 調(diào)整body標(biāo)簽的fontSize，fontSize = (12 * dpr) + 'px'
 // 設(shè)置默認(rèn)字體大小，默認(rèn)的字體大小繼承自body
 function setBodyFontSize () {
 if (document.body) {
  document.body.style.fontSize = (12 * dpr) + 'px'
 } else {
  document.addEventListener('DOMContentLoaded', setBodyFontSize)
 }
 }
 setBodyFontSize();

 // set 1rem = viewWidth / 10
 // 設(shè)置root元素的fontSize = 其clientWidth / 10 + ‘px'
 function setRemUnit () {
 var rem = docEl.clientWidth / 10
 docEl.style.fontSize = rem + 'px'
 }

 setRemUnit()


 // 當(dāng)我們頁面尺寸大小發(fā)生變化的時(shí)候，要重新設(shè)置下rem 的大小
 window.addEventListener('resize', setRemUnit)
  // pageshow 是我們重新加載頁面觸發(fā)的事件
 window.addEventListener('pageshow', function(e) {
  // e.persisted 返回的是true 就是說如果這個(gè)頁面是從緩存取過來的頁面，也需要從新計(jì)算一下rem 的大小
  if (e.persisted) {
   setRemUnit()
  }
 })

 // 檢測(cè)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>

下面的這個(gè)meta標(biāo)簽 頁面不要設(shè)定， Flexible會(huì)自動(dòng)設(shè)定每個(gè)屏幕寬度的根font-size、動(dòng)態(tài)viewport、針對(duì)Retina屏做的dpr。

// 這個(gè)標(biāo)簽不要設(shè)定！??！
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> -->

2. 把視覺稿中的px轉(zhuǎn)換成rem

一般UI給我們的稿子大小是750的。就以這個(gè)為例子：在flexible.js中，把750px分為10份，1rem 為 75px。所以font-size的基準(zhǔn)值為75px；
css換算成rem公式為: px值 / 75 = rem, 例如：100px=100/75=1.33rem
但是這樣一來計(jì)算起來就非常的復(fù)雜。那么我們?cè)谌粘ｉ_發(fā)中怎么快速計(jì)算呢，這里我說下我常用的編譯器VScode 它里面有個(gè)插件叫cssrem，用它就可以在我們輸入px值后自動(dòng)轉(zhuǎn)換rem。

安裝方法如下：

①：安裝插件

②：修改配置參數(shù)

當(dāng)設(shè)計(jì)圖為750時(shí)在下圖中這里填寫75
root font-size (unit: px), default: 16
這代表根字體大小，默認(rèn)是16px，即1rem = 16px,我們這里把他改為75。
cssrem.fixedDigits px轉(zhuǎn)rem小數(shù)點(diǎn)最大長(zhǎng)度，默認(rèn)：6。

③：修改完參數(shù)后我們只要輸入px值插件就會(huì)自動(dòng)算出rem值，效果如下圖：

到此這篇關(guān)于flexible.js實(shí)現(xiàn)移動(dòng)端rem適配方案的文章就介紹到這了,更多相關(guān)flexible.js 移動(dòng)端rem適配內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論