CSS中px/rem/em/vw/vh 的区别

最新推荐文章于 2023-11-21 14:40:25 发布

大鸡腿123

最新推荐文章于 2023-11-21 14:40:25 发布

阅读量679

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yiersan__/article/details/107774128

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

px

像素px是在写网页中最常用的单位，是相对于屏幕分辨率而言

rem

相对于html根元素字体大小，如果没有设置根元素字体大小，则相对于默认大小16px 。可以理解为是html字体大小的多少倍

em

相对于父元素的字体大小。如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸。可以理解为是父元素字体大小的多少倍

vw

vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

vh

vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

%

一般来说，是相对于父元素。

如果position:absolute;是相对于最近的加了定位的父元素
如果position:fixed;是相对于viewport

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <script src="text.js"></script>
    <p>我爱你</p>
    <!-- 为设置的HTML字体大小 -->
    <p style="font-size: 15px;">我爱你</p>
    <!-- 自己设置的字体大小 -->
    <p style="font-size:1.5rem;">我爱你</p>
    <!-- 1.5rem=1.5*20px=30px -->
    <p style="font-size: 1.5rem;">我<span style="font-size: 0.5em;">爱</span>你</p>
    <!-- 0.5em=0.5*1.5rem=0.5*1.5*20px=15px -->
    <p style="font-size: 2vw;">我爱你</p>
    <p style="font-size: 2vh;">我爱你</p>
    <p style="font-size: 50%;">我爱你</p>
    <!-- 50%*20px=10px -->
</body>
</html>