css3vw适配_css3新单位vw、vh的使用教程

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

那有没有一个单位不需要JS和CSS耦合在一起的单位？答案是有的，就是vw／vh。

vw = view width

vh = view height

这两个单位是CSS3引入的，以上称为视口单位允许我们更接近浏览器窗口定义大小。

vw、vh、vmin、vmax 的含义

(1)vw、vh、vmin、vmax 是一种视窗单位，也