css3新单位vw、vh的使用教程
时间:2018/5/9 21:37:44阅读:
响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小。比如:(function (doc, win) {let docEl = doc.documentElementlet resizeEvt = orientationchange in window ? orientationchange : resizelet recalc…
响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小。
比如:
(function (doc, win) {
let docEl = doc.documentElement
let resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"
let recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 14 * (clientWidth / 320) + "px"
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener("DOMContentLoaded", recalc, false)
})(document, window)