px、rpx、em、rem、vw、vh各种像素单位的区别_rem vw px rpx区别

作者：小小林熬夜学编程 | 2024-02-17 01:40:37

踩

rem vw px rpx区别

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				font-size:16px;
			}
			div{
				/* 基准点为父节点字体的大小
				      如当前对行内文本的字体尺寸未被人为设置，
				      则相对于浏览器的默认字体尺寸(16px)  */
				font-size:1.5em;
			}
			.block-sub{
				/* 相对于根节点 html (默认16 px 字体大小) */
				font: size 1.5em;
			}
			
		</style>
	</head>
	<body>
		<div class="block">
			父元素
			<div class="block">
				子元素
				<div class="block"></div>
			</div>
			
		</div>
		<div class="block-sub">兄弟元素</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述
4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
视口指可视区域；
5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

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

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

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

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/98788