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

最新推荐文章于 2024-11-19 10:55:30 发布

木子家的小李子

最新推荐文章于 2024-11-19 10:55:30 发布

阅读量682

点赞数

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/weixin_42215834/article/details/130600981

版权

这篇文章介绍了CSS中几种常见的相对长度单位，包括px基于显示器分辨率，em相对于父节点字体大小，rem相对于根元素字体大小，以及vhandvw相对于视口尺寸，vmin和vmax则是视口尺寸的最小值和最大值。此外，还提到了设备像素（pt）和设备像素比（dpr）以及像素密度（ppi）的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>