px、em、 rem、vh、vw 的区别

alpha_xiao

已于 2022-04-02 10:13:35 修改

阅读量6.4k

点赞数 1

文章标签： css html css3

于 2022-03-11 14:49:26 首次发布

本文链接：https://blog.csdn.net/alpha_xiao/article/details/123424814

版权

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em：相对长度单位。基准点为父节点字体的大小，即相对于当前对象内文本的字体尺寸（继承父节点字体大小）。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸( 16px )。

3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。

<!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 type="text/css">
    body{
      font-size: 16px;
    }
    div{
      /* 基准点为父节点字体的大小
      如当前对行内文本的字体尺寸未被人为设置，
      则相对于浏览器的默认字体尺寸(16px)  */
      font-size: 1.5em; 
    }
    .div4{
      /* 相对于根节点 html (默认16 px 字体大小)
      16px X 1.5 = 24px */
      font-size: 1.5rem;
    }
  </style>
</head>
<body>
  body
  <!-- div1 字体大小 16px X 1.5 = 24px
  div2 字体大小 24px X 1.5 = 36px
  div3 字体大小 36px X 1.5 = 54px -->
  <div class="div1">
    div1
    <div class="div2">
      div2
      <div class="div3">
        div3
        <div class="div4">
          div4
        </div>
      </div>
    </div>
  </div>
</body>
</html>

4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。

5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

6、pt 设备像素（物理像素）

7、dpr = 设备像素 / 设备独立像素

8、ppi 每英寸像素，值越大，图像越清晰

alpha_xiao

关注

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
2
评论
px、em、 rem、vh、vw 的区别

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。...
复制链接

扫一扫