移動端自適應佈局解決方案:rem佈局
阿新 • • 發佈:2018-12-03
之前寫了一篇rem佈局的文章,今天拿出來發現已經過時了。於是再來寫一遍!
2018.10.24更新
首先在html裡面設定一下視口:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
然後在你的頁面引入下面的js,用來檢查使用者的裝置dpr。我們根據不同的dpr來動態修改html根元素的fontsize。(我們知道rem是依據根元素來計算的)
(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports 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))
好了!以上兩步就能實現自適應佈局了。
最後以pad 768*1024的邏輯畫素為例子。我們將整個螢幕的寬度分為10rem,這樣就得出1rem = 76.8px;假如我的設計稿有一個620px * 640px的div元素,那我們轉換為rem就是:620 / 76.8 rem* 640 / 76.8 rem ≈ 8.07rem * 8.33rem 。但是這樣在實際開發中不利於計算,我們可以藉助sass來幫我們做:
$baseFontSize:76.8px; //以768px的pad寬度為基準 @function toRem($px){ @return $px/$baseFontSize * 1rem; } div{ width: toRem(620px); height: toRem(640px); }
以上就是我的全部內容。如有遺漏,歡迎評論留言。