现代开发中已经很少使用,有 postcss-px-to-viewport
、vw/vh
、媒体查询
等更现代的方案
说明
flexible.js
是一个用于移动端网页布局的 自适应解决方案,主要用于配合 rem
单位实现响应式设计。最初由阿里巴巴的团队(如淘宝无线)开发。
其有两个核心作用:
1. 设置 viewport
:
动态设置 <meta name="viewport">
,控制页面的缩放行为。
2. 设置 html
的 font-size
:
根据设备的 dpr
(设备像素比)和屏幕宽度计算 html
根节点的 font-size
,从而实现基于 rem
的布局。
使用方法:
直接在 CSS 里使用 rem 即可,根元素的 font-size 会根据设备自动计算。
1 2 3 4 5 6 7
| <style> .box { width: 3rem; } </style>
|
源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| (function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
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))
|