理解REM单位-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43445778/article/details/105579243

在最近阅读美团的源码的时候，我发现了一个新增的单位rem,区别于px,对这个单位进行了一定的研究！
像素单位px
px是Pixel的缩写，就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和 Element（元素）这两个单词的字母所组成的，如同摄影的相片一样，数码影像也具有连续性的浓淡阶调。

css像素又称为虚拟像素、设备独立像素或者逻辑像素，可以理解为直觉像素。比如iPhoneX的像素数为375 x 812px。

REM是什么？
rem是一个相对单位，主要是相对于根元素字体的大小，使用rem,我们需要参考指定的根元素。

rem主要用于屏幕适配布局，主要在移动端使用的比较广泛，优点在于只需要根据不同的屏幕设置不同的根元素就可以让系统适配不同的屏幕。

rem的使用方法
浏览器的默认字体大小都是16px;
因为rem是相对于根元素html的font-size的大小，所以我们根据font-size的大小进行转换就可以了。

当没有设置html根元素的font-size的大小时，font-size的默认值是16px,此时px与rem的转换关系：
当没有设置根元素的font-size的大小时候，默认值为16px的转换关系

px	rem
12	12/16 = .75
14	14/16 = .875
16	16/16 = 1
18	18/16 = 1.125
20	20/16 = 1.25
24	24/16 = 1.5
30	30/16 = 1.875
36	36/16 = 2.25
42	42/16 = 2.625
48	48/16 = 3

例子：当前没有设置根元素，默认值为16px;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rem</title>
	<style type="text/css">
		.box1{
			width: 10rem;
			height: 10rem;
			border: 2rem solid #000;
		}
		.box2{
			width: 100px;
			height: 100px;
			border: 2px solid #000;
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</body>
</html>

此时由于根元素上的font-size默认值为16px，所以，我设置height：10rem,实际上就是160px，而border宽设置为2rem，显示效果其实就是32px;
与box2相比较，可以明显的看出px与rem的区别
效果图如下：
在这里插入图片描述

但是当改变了根元素上的font-size的值的以后，rem就会相对于根元素进行改变.此时，我们改变根元素上的font-size的值。

添加html的font-size的值为5px;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rem</title>
	<style type="text/css">
		html{
			font-size: 5px;
		}
		.box1{
			width: 10rem;
			height: 10rem;
			border: 2rem solid #000;
		}
		.box2{
			width: 100px;
			height: 100px;
			border: 2px solid #000;
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</body>
</html>