您当前的位置:首页 > 文章教程 > 计算机与互联网 > 网页制作

css3新单位vw、vh的使用教程

响应式布局的单位我们第一时间会想到通过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)