在前端开发中，rem和px的换算规则主要基于根元素（通常是标签）的字体大小。以下是详细的换算规则：
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
所以这里总结一句，所谓依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-size来计算
例如 ：
html{font-size:16px;}
那么我们这里的1rem就应该这么来计算：1x16=16px=1rem；浏览器默认为16px可能造成rem计算上的麻烦和多位小数，所以，我们也可以进行这种方式的初始化根元素：
html{
font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号
}
这样初始化之后，我们来进行rem计算的时候，就会减少许多的麻烦。
px（像素）：
px是一种绝对单位，代表屏幕上的实际像素点。它是分辨率的单位，分辨率越高，显示效果就越精细。
例如，如果某个元素的宽度设置为300px，那么无论在任何设备上，这个元素的宽度都会占据300个像素点的空间。
rem（相对于根元素的字体大小）：
rem是一种相对单位，它基于根元素的字体大小进行换算。默认情况下，浏览器的根字体大小通常为16px。
换算公式为：px = rem * 根元素字体大小。例如，如果根元素字体大小为16px，那么1rem就等于16px，2rem就等于32px（即2*16px），以此类推。
如果在CSS中显式设置了根字体大小，例如html{font-size:20px;}，那么1rem就等于20px，2rem就等于40px（即2*20px）。
换算示例：
假设根元素字体大小为默认的16px，那么：
1rem = 16px
2rem = 32px
0.5rem = 8px
如果根元素字体大小设置为20px，那么：
1rem = 20px
2rem = 40px
注意事项：
当设置根元素字体大小时，应注意浏览器的最小字体限制。例如，有些浏览器可能不允许字体大小小于12px。因此，即使设置了更小的字体大小，实际换算时仍可能按照12px进行计算。
使用rem单位可以使布局和字体大小更加灵活和响应式。通过调整根元素的字体大小（例如通过媒体查询或用户设置），可以轻松地更改整个布局的比例和尺寸，而无需单独修改每个元素的样式。