rem,em,vw,vh,vm的区别

静候佳音L

已于 2024-04-17 18:26:52 修改

阅读量877

点赞数 13

文章标签：前端 javascript css

于 2024-04-17 18:26:42 首次发布

本文链接：https://blog.csdn.net/m0_51181022/article/details/137883686

版权

rem、em、vw、vh、vm都是相对单位，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。它们之间的区别是什么呢？

rem

rem是什么？

首先，rem全称（font size of the root element），根元素的字体大小
它是 css3 新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是说它是一个相对单位。
rem是一个相对长度单位。相对于父元素的倍数来计算。
浏览器默认的字体大小时16px，1rem就是16px。

rem的应用场景

可以用来做 web app屏幕适配，因为不同手机型号的屏幕大小不同，所以这时候我们就不能用px（固定单位），rem是不用手机屏幕适配的一种方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 14px;
        }
        .p1 {
            font-size: 16px;
        }
        .p2 {
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <p class="p1">
        我是绝对单位  文字大小16px
    </p>
    <p class="p2">
        我是相对单位 文字大小2rem(2 * 14px = 28px)
    </p>
</body>
</html>

在这里插入图片描述

em

em是什么？

首先em是相对于父元素的字体大小来变化的。
它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
跟rem相比em有局限性，因为em只能根父级文字大小变化，而rem是相对于根元素大小变化的。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 14px;
        }
        .container {
            font-size: 18px;
        }
        .p1 {
            font-size: 2rem;
        }
        .p2 {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="p1">
            我是相对单位rem 相对于根元素 文字大小是 2rem (2 * 14 px = 28px)
        </p>
        <p class="p2">
            我是相对单位em  相对于父元素 文字大小是 2em  (2 * 18 px = 36px)
        </p>
    </div>

</body>
</html>

在这里插入图片描述

vw、vh、vm

vw、vh、vm是什么

vw：Viewport Width，视窗宽度，1vw=视窗宽度的1%
vh：Viewport Height，视窗高度，1vh=视窗高度1%
vmin：vm 和 vh 中较小的那个。
vmax：vw 和 vh 中较大的那个。

vw

Viewport Width，视窗宽度，1vw=视窗宽度的1%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 14px;
        }
        .p1 {
            font-size: 0.5vw;
        }

    </style>
</head>
<body>
    <p class="p1">
        我是 vw 单位 我的字体大小为视窗宽度 1920 / 100 * 0.5 = 9.6px
    </p>
</body>
</html>

在这里插入图片描述

vh

Viewport Height，视窗高度，1vh=视窗高度1%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 14px;
        }
        .p1 {
            font-size: 2vh;
        }

    </style>
</head>
<body>
    <p class="p1">
        我是 vh 单位 我的字体大小为视窗高度 919 / 100 * 2 = 18.38px
    </p>
</body>
</html>