移动端 flexible.js 布局详解
原本想直接引入原文鏈接，但是又擔(dān)心作者哪天想不開(kāi)注銷(xiāo)賬號(hào)，這么好的一篇文章看不到了，還是轉(zhuǎn)載一下吧(/ω＼)。
另外推薦一篇好文：移動(dòng)端rem自適應(yīng)實(shí)操講解
本文講的通過(guò) flexible.js 實(shí)現(xiàn)了rem自適應(yīng)，有了 flexible.js，我們就不必再為移動(dòng)端各種設(shè)備兼容煩惱，flexible.js 是如何通過(guò) rem 實(shí)現(xiàn)自適應(yīng)的呢？一起來(lái)看看： 通過(guò) rem 與 px 的換算，你可以把設(shè)計(jì)稿從 px 轉(zhuǎn)到 rem。再也不用為各種設(shè)備橫行而擔(dān)憂(yōu)。
rem是相對(duì)于根元素 <html>，這樣就意味著，我們只需要在根元素確定一個(gè) px 字號(hào)，則可以來(lái)算出元素的寬高。1rem=16px(瀏覽器html的像素，可以設(shè)定這個(gè)基準(zhǔn)值），假如瀏覽器的 html 設(shè)為 64px，則下面的元素則 1rem=64px 來(lái)運(yùn)算。 阿里團(tuán)隊(duì)開(kāi)源的一個(gè)庫(kù)。使用 flexible.js 輕松搞定各種不同的移動(dòng)端設(shè)備兼容自適應(yīng)問(wèn)題
實(shí)現(xiàn)方法
通過(guò)js來(lái)調(diào)整html的字體大小，而在頁(yè)面中的制作稿則統(tǒng)一使用rem這個(gè)單位來(lái)制作。關(guān)鍵代碼如下：
;(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {console.warn('將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例');var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial-dpr=([d.]+)/);var maximumDpr = content.match(/maximum-dpr=([d.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2)); }if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2)); }}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){dpr = 2;} else {dpr = 1;}} else {// 其他設(shè)備下，仍舊使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));從上面的代碼，主要是改變了 dpx 和 document 的 font-size 大小。大小為 docEl.getBoundingClientRect().width / 10 + 'px';， 假設(shè)我們的設(shè)計(jì)稿寬是 640 的，則 html 的字體大小則被設(shè)為 64px 。則相當(dāng)于1rem=64px。 假如一個(gè)元素的寬是 160px ,在平時(shí)，我們可以采用百分比可以做到自適應(yīng)，假如使用響應(yīng)式的話(huà)，可能需要設(shè)置多個(gè)，比如在 320px，輸出 80px，而在 640px 輸出160px 等。 而采用以上 rem 的方法，則只需要輸出 2.5rem 就能實(shí)現(xiàn)統(tǒng)一，如下表格：
| Html字體大小 | 32px | 36px | 41.4px | 64px |
| 實(shí)際輸出 | 1rem | 1rem | 1rem | 1rem |
| 設(shè)計(jì)稿縮放大小 | 80px | 90px | 103.5px | 160px |
| 實(shí)際輸出 | 2.5rem | 2.5rem | 2.5rem | 2.5rem |
以上的 2.5rem 是怎么得出的呢？ 160/64（1rem的基數(shù)為64px）=2.5rem ;按照官方的說(shuō)法（640px舉例） Flexible 會(huì)將視覺(jué)稿分成100份 （主要為了以后能更好的兼容 vh 和 vw），而每一份被稱(chēng)為一個(gè)單位 a。同時(shí) 1rem 單位被認(rèn)定為 10a。針對(duì)我們這份視覺(jué)稿可以計(jì)算出：(設(shè)計(jì)稿為 750px 為例）
1a = 7.5px 1rem = 75px那么我們這個(gè)示例的稿子就分成了 10a，也就是整個(gè)寬度為 10rem，<html> 對(duì)應(yīng)的 font-size 為 75px： 這樣一來(lái)，對(duì)于視覺(jué)稿上的元素尺寸換算，只需要原始的 px 值除以 rem 基準(zhǔn)值即可。例如此例視覺(jué)稿中的圖片，其尺寸是 176px * 176px ,轉(zhuǎn)換成為2.346667rem * 2.346667rem。
本人理解：寫(xiě)移動(dòng)端頁(yè)面時(shí)，讓設(shè)計(jì)人員將設(shè)計(jì)稿設(shè)計(jì)成寬為 640px，方便計(jì)算。因?yàn)楫?dāng)時(shí)的主流是iPhone5及iPhone5s，物理像素寬度為 640，分辨率為320。
如上圖，當(dāng)我們把分辨率調(diào)為 320 時(shí)，flexible.js 經(jīng)過(guò)計(jì)算后，可以看到 <html> 的 font-size 已經(jīng)是 32 px了，也就是屏幕寬度 320 除以10的結(jié)果。
而此時(shí)設(shè)計(jì)稿是 640px 寬的，假設(shè)某個(gè)元素在設(shè)計(jì)稿上的寬為 128px，那么在實(shí)際開(kāi)發(fā)中，我們要把它在 320px 的基礎(chǔ)上計(jì)算，即開(kāi)發(fā)時(shí) 128px/2/34px=2rem。
flexible分析，px轉(zhuǎn)rem的插件工具
另外大漠還寫(xiě)了一篇詳細(xì)的文章：使用 Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配 里面介紹了一個(gè)如何快速轉(zhuǎn)換rem為px的幾種方法，感興趣的童鞋可以去看看。 也可以看這篇文章：Sass函數(shù)功能——rem轉(zhuǎn)px 另外在使用這個(gè)來(lái)處理自適應(yīng)的另一個(gè)坑就是css sprite，作者的建議是使用svg，或者icon font.或者base64等其他方案。 另外就是在dpr=2時(shí)，小圖片可能會(huì)出現(xiàn)模糊，建議以最大的圖片來(lái)切圖。
字體建議使用 px
在作者的觀點(diǎn)中，是建議描述性的字體使用px，如果有slogan之類(lèi)大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字體不同，可能出現(xiàn)13px和15px,點(diǎn)陣字體。 顯然，我們?cè)趇Phone3G和iPhone4的Retina屏下面，希望看到的文本字號(hào)是相同的。也就是說(shuō)，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機(jī)上看到更多文本，以及，現(xiàn)在絕大多數(shù)的字體文件都自帶一些點(diǎn)陣尺寸，通常是16px和24px，所以我們不希望出現(xiàn)13px和15px這樣的奇葩尺寸。 如此一來(lái)，就決定了在制作H5的頁(yè)面中，rem并不適合用到段落文本上。所以在Flexible整個(gè)適配方案中，考慮文本還是使用px作為單位。只不過(guò)使用[data-dpr]屬性來(lái)區(qū)分不同dpr下的文本字號(hào)大小。
<style> div { // 默認(rèn)寫(xiě)上dpr為1的fontSizewidth: 1rem; height: 0.4rem;font-size: 12px; } [data-dpr="2"] div {font-size: 24px; } [data-dpr="3"] div {font-size: 36px; } </style>為了能更好的利于開(kāi)發(fā)，在實(shí)際開(kāi)發(fā)中，我們可以定制一個(gè)font-dpr()這樣的Sass混合宏：
<style> @mixin font-dpr($font-size){font-size: $font-size;[data-dpr="2"] & {font-size: $font-size * 2;}[data-dpr="3"] & {font-size: $font-size * 3;} } </style>有了這樣的混合宏之后，在開(kāi)發(fā)中可以直接這樣使用：
@include font-dpr(16px);當(dāng)然這只是針對(duì)于描述性的文本，比如說(shuō)段落文本。但有的時(shí)候文本的字號(hào)也需要分場(chǎng)景的，比如在項(xiàng)目中有一個(gè)slogan,業(yè)務(wù)方希望這個(gè)slogan能根據(jù)不同的終端適配。針對(duì)這樣的場(chǎng)景，完全可以使用rem給slogan做計(jì)量單位。
由于使用 rem，要根據(jù) rem 的數(shù)值來(lái)定，就像200*200，在分辨為 320px 下計(jì)算成 rem 后會(huì)出現(xiàn)小數(shù)，而對(duì)于字體來(lái)說(shuō)當(dāng)然不要有小數(shù)或者像 13px，15px 這種奇葩的字體，所以這里建議要么把字體 px 定死要么自己手寫(xiě)媒體查詢(xún)吧。
如果你下載完看過(guò)源碼，那你就知道，Flexible對(duì)屏幕的寬度做了一個(gè)小的限制，在你的屏幕寬度＞540px的時(shí)候，<html>的 font-size 依然會(huì)是 54px，也就是當(dāng)你把屏幕寬度設(shè)置為 640px 的時(shí)候，html 的 font-size 是 54px。
所以如果你想兼容更大尺寸的屏幕，那就把這段代碼刪掉好了。
總結(jié)
以上是生活随笔為你收集整理的移动端 flexible.js 布局详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 封装 axios 请求
- 下一篇： iframe 高度根据子页面来确定