网站首页 > 基础教程正文

CSS em、rem、vm单位详解（css的rem单位）

ccvgpt 2024-11-16 17:35:42 基础教程 6 ℃

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, 所以对于按比例分配空间这种需求是没法满足的, 需要和其他适配方式混合使用。

上一篇： Vue3 JS 与 SCSS 变量相互使用- 干货
下一篇：没人告诉你关于 CSS 变量的那些事

网站首页 > 基础教程 正文

CSS em、rem、vm单位详解（css的rem单位）

猜你喜欢

网站首页 > 基础教程正文