rem是相对于根元素的fontsize属性,即相对于<html>标签的font-size实现的,浏览器默认字号是font-size:16px
ref适配原理
是一种用于移动设备网页开发的CSS3长度单位,它允许页面元素根据根元素(通常是HTML元素)的字体大小来缩放。这种适配方式的核心在于使用媒体查询来根据不同的设备尺寸动态设置HTML的字体大小,然后使用rem作为元素尺寸的单位。当HTML的字体大小发生变化时,页面中的rem单位也会相应地缩放,从而使得页面元素在不同屏幕尺寸上能够保持相对一致的视觉效果。
- 使用媒体查询根据不同设备尺寸动态设置HTML的font-size。
- 使用rem单位作为元素尺寸的计算基准,使得元素在不同屏幕上保持相对一致的视觉效果。
- 通过动态设置meta标签的viewport,让CSS中的1rem等于设备的1px,从而实现等比缩放适配。
在移动端的页面开发中,需要根据不同的手机去适配页面,让页面可以自适应的展示。
也就是说根据屏幕宽度的大小,改变元素和字体的大小,屏幕越宽元素和字体越大。
这个时候我们通常会用到rem作为单位
rem是css3中新增的一个单位,它是一个相对单位
rem用作非根元素的时候,是相对于根元素设定的字体大小,,用于根元素的时候,相对于初始字体的大小