rem（Root Ems）是一种相对长度单位，主要用于CSS布局中，它基于根元素（html元素）的字体大小（font-size）来定义长度
定义与原理
-
定义：
rem是相对于根元素（html元素）的字体大小（font-size）的单位。如果根元素的font-size为16px，那么1rem = 16px -
原理：
rem的值是基于根元素的font-size来计算的，因此它是一种相对单位，但相对的是根元素的字体大小，而不是父元素的字体大小。
优点
- 全局可配置：通过调整根元素的
font-size，可以全局控制页面的缩放比例，便于实现响应式设计。 - 易于维护：使用
rem可以减少硬编码的px值，使代码更具可维护性和可扩展性。 - 响应式设计：通过动态调整根元素的
font-size，可以实现页面在不同屏幕尺寸下的自适应布局
使用场景
-
响应式网页设计：通过动态调整根元素的
font-size，可以实现页面在不同屏幕尺寸下的自适应布局 -
字体大小：可以用于设置字体大小，确保字体在不同屏幕尺寸下保持合适的显示比例。
-
布局尺寸：可以用于设置页面元素的宽度、高度、内边距等属性，使页面布局在不同设备上保持良好的显示效果。
转换关系
与px的转换：假设根元素的font-size为16px，则1rem = 16px。如果根元素的font-size为20px，则1rem = 20px
与em的转换：em是相对于父元素的字体大小，而rem是相对于根元素的字体大小。如果根元素的font-size为16px，父元素的font-size为20px，则1em = 20px，而1rem = 16px。
实现响应式设计
在响应式设计中，rem通常与媒体查询（@media）结合使用，通过动态调整根元素的font-size来实现页面的自适应布局。例如
html {
font-size: 16px; /* 默认字体大小 */
}
@media (max-width: 768px) {
html {
font-size: 14px; /* 在小屏幕上减小字体大小 */
}
}
@media (min-width: 1200px) {
html {
font-size: 18px; /* 在大屏幕上增大字体大小 */
}
}
通过这种方式，页面的布局和字体大小会根据屏幕宽度自动调整。
注意事项
- 根元素字体大小的设置：需要合理设置根元素的
font-size，以确保页面在不同设备上的显示效果。 - 兼容性：
rem在现代浏览器中得到了广泛支持，但在一些旧版本浏览器中可能需要额外的兼容性处理。 - 与
px的混合使用：在某些情况下，可能需要同时使用rem和px，例如固定大小的元素或边框等。
注意事项
- 根元素字体大小的设置：需要合理设置根元素的
font-size，以确保页面在不同设备上的显示效果。 - 兼容性：
rem在现代浏览器中得到了广泛支持，但在一些旧版本浏览器中可能需要额外的兼容性处理。 - 与
px的混合使用：在某些情况下，可能需要同时使用rem和px，例如固定大小的元素或边框等。
示例
假设根元素的font-size为16px，页面中有一个按钮，其宽度需要设置为160px，则可以使用rem来设置：
html {
font-size: 16px;
}
button {
width: 10rem; /* 10rem = 10 * 16px = 160px */
}
如果需要在小屏幕上减小按钮的宽度，可以通过媒体查询调整根元素的font-size：
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
此时，按钮的宽度会自动调整为10rem = 10 * 14px = 140px
总结：rpx与rem的区别
rpx是基于屏幕宽度的相对单位，主要用于微信小程序和uni-app等移动应用开发，适合根据屏幕宽度自适应布局；而rem是基于根元素（html）字体大小的相对单位，常用于Web开发中的响应式设计，适合动态调整字体和布局。
