Flexible.js可伸縮布局實現(xiàn)方法詳解
阿里團(tuán)隊開源的一個庫。flexible.js，主要是實現(xiàn)在各種不同的移動端界面實現(xiàn)一稿搞定所有的設(shè)備兼容自適應(yīng)問題。
實現(xiàn)方法：
通過JS來調(diào)整html的字體大小，而在頁面中的制作稿則統(tǒng)一使用rem這個單位來制作。關(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)簽來設(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下，對于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è)計稿寬是640的，則html的字體大小則被設(shè)為64px.則相當(dāng)于1rem=64px.(1rem相對于根節(jié)點的字體大小)。
假如一個元素的寬是160px,在平時，我們可以采用百分比可以做到自適應(yīng)，假如使用響應(yīng)式的話，可能需要設(shè)置多個，比如在320px，輸出80px，而在640px輸出160px等。而采用以上的方法，則只需要輸出2.5rem就能實現(xiàn)統(tǒng)一，如下表格：
設(shè)備寬度 320px 360px 414px 640px Html字體大小 32px 36px 41.4px 64px 實際輸出 1rem 1rem 1rem 1rem 設(shè)計稿縮放大小 80px 90px 103.5px 160px 實際輸出 2.5rem 2.5rem 2.5rem 2.5rem
以上的2.5rem是怎么得出的呢？
160/64（1rem的基數(shù)為64px）=2.5rem;按照官方的說法（750px舉例）
Flexible會將視覺稿分成100份（主要為了以后能更好的兼容vh和vw），而每一份被稱為一個單位a。同時1rem單位被認(rèn)定為10a。針對我們這份視覺稿可以計算出：
1a = 7.5px1rem = 75px
那么我們這個示例的稿子就分成了10a，也就是整個寬度為10rem，<html>對應(yīng)的font-size為75px：
這樣一來，對于視覺稿上的元素尺寸換算，只需要原始的px值除以rem基準(zhǔn)值即可。例如此例視覺稿中的圖片，其尺寸是176px * 176px,轉(zhuǎn)換成為2.346667rem * 2.346667rem。
另外在使用這個來處理自適應(yīng)的另一個坑就是css sprite，作者的建議是使用svg，或者icon font.或者base64等其他方案。
另外就是在dpr=2時，小圖片可能會出現(xiàn)模糊，建議以最大的圖片來切圖。
字體建議使用px
在作者的觀點中，是建議描述性的字體使用px，如果有slogan之類大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字體不同，可能出現(xiàn)13px和15px,點陣字體。
顯然，我們在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字號是相同的。也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機(jī)上看到更多文本，以及，現(xiàn)在絕大多數(shù)的字體文件都自帶一些點陣尺寸，通常是16px和24px，所以我們不希望出現(xiàn)13px和15px這樣的奇葩尺寸。
如此一來，就決定了在制作H5的頁面中，rem并不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區(qū)分不同dpr下的文本字號大小。
div { width: 1rem; height: 0.4rem; font-size: 12px; // 默認(rèn)寫上dpr為1的fontSize}[data-dpr='2'] div { font-size: 24px;}[data-dpr='3'] div { font-size: 36px;}
為了能更好的利于開發(fā)，在實際開發(fā)中，我們可以定制一個font-dpr()這樣的Sass混合宏：
@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; }}
有了這樣的混合宏之后，在開發(fā)中可以直接這樣使用：
@include font-dpr(16px);
當(dāng)然這只是針對于描述性的文本，比如說段落文本。但有的時候文本的字號也需要分場景的，比如在項目中有一個slogan,業(yè)務(wù)方希望這個slogan能根據(jù)不同的終端適配。針對這樣的場景，完全可以使用rem給slogan做計量單位。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備