移動端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值,效果如下圖:
最後說下最近看了不少這方面的博客文章,我這也只是把大家寫的文章綜合起來自己跟着走了幾遍,試驗了不少方法然後弄出來的,如果有哪些錯誤的地方希望大夥能幫我指出來,謝謝!