深入解析CSS中的em、rem和vm长度单位

发表时间: 2024-05-02 19:32

em参考该元素的字体大小而定

rem->root 参考根元素(html)的字体大小, html默认字体的大小: 14px

使用rem单位开发移动端页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 15rem;    height: 100px;    background-color: red;}</style><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body><div></div><script type="text/javascript">    //获取dpr    var dpr = window.devicePixelRatio;    //获取缩放比    var scale = 1 / dpr;    //重写写入meta标签    document.write('<meta name="viewport" content="width=device-width,initial-scale='+scale+'" />');    //获取设备宽度(分辨率)    var w = document.documentElement.clientWidth;    //获取html    var html = document.getElementsByTagName("html")[0];    html.style.fontSize = w / 15 + "px";</script></body></html>

css3新单位，viewpoint width的缩写, 视窗宽度, 1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

css3新单位, viewpoint height的缩写, 视窗高度, 1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

css3新单位, 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子：浏览器高度900px, 宽度1200px, 取最小的浏览器高度, 1 vm = 900px/100 = 9 px。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}/*html,body{height: 100%;}*/div{    width: 100px;    /*height: 100%;*/    height: 50vw;    background-color: red;}</style></head><body><div></div></body></html>

em 是一个很早就出现的单位, IE6 都可以兼容。但是 rem 是 CSS3 的属性, 使用的时候要注意它的兼容性问题。目前 rem 通常应用在移动端的 WEB 开发上。

Rem 适配的优点： Rem 的参考值只有一个, 就是 HTML 字体大小, 所以不会像百分比适配那样要明确参考谁。

Rem 使用的范围比较广, 元素的高度宽度、border 宽度、字号大小、间距和偏移量等都可以用 rem 做单位 Rem 适配的时候不需要做多套样式, 可以直接按比例改变 HTML字体的大小。

Rem 适配的缺点： Rem 是 CSS3 的属性, 只有比较新的浏览器上可以使用, 一般都是用在移动端。目前大厂的 H5 页面, 基本都在使用 Rem 方式做屏幕适配了。

Rem 最后换算出来的值还是 px, 所以对于按比例分配空间这种需求是没法满足的, 需要和其他适配方式混合使用。

深入解析CSS中的em、rem和vm长度单位

热门阅读

推荐阅读