理解 px，em，rem 的区别和用法

最新推荐文章于 2024-07-08 08:16:11 发布

Python User

最新推荐文章于 2024-07-08 08:16:11 发布

阅读量959

点赞数

分类专栏： CSS/CSS3 文章标签： web app

本文链接：https://blog.csdn.net/weixin_44684357/article/details/110096821

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

px：px是固定的像素，他的大小不会因为屏幕的大小而进行改变的；
em：相对长度，相对父元素的 font-size 的大小而做出改变的；
rem：相对长度，rem 中的 r 就是 root 的意思，根据 root 元素的 font-size 的大小而做出的改变；

如此，便着重来了解一下 rem 的一些使用：

假设UI稿为如图所示：
UI 稿，屏幕 w 为 360px；其中红色盒子w 为 180px 且刚好为一般，如果要将此UI适配于不同屏幕，那么就需要通过rem来进计算，具体计算结果如下：
在这里插入图片描述
代码说明如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>rem 屏幕适配</title>
	<style>
		body {
			margin: 0;
			padding: 0
		}
		@media screen and (device-width: 320px) {
			/* device-width 当前设备分辨率的宽*/
			html {
				/*这个值是根据自己当前划分多少分来，当前划分为20分*
				*320/20 = 16*/
				font-size: 16px;
			}
		}
		@media screen and (device-width: 360px) {
			html {
				font-size: 18px;
			}
		}
		@media screen and (device-width: 375px) {
			html {
				font-size: 18.75px;
			}
		}
		@media screen and (device-width: 414px) {
			html {
				font-size: 20.07px;
			}
		}
		div {
			/*因为盒子占了一半，一共20份，所以一半就是10rem*/
			/*如果要设置其他小于1rem值，就得在原始稿把比例算好，占了最大宽度的几分之几，
			再用这个几分之几乘以20份 就是rem的大小*/
			width: 10rem;  /*180/360 乘以 20 份 = 10rem*/
			height: 10rem;
			background: red;
		}
	</style>
</head>
<body>
	<div>ddd123</div>
</body>
</html>