rem适配原理

        rem是相对于根元素的fontsize属性,即相对于<html>标签的font-size实现的,浏览器默认字号是font-size:16px

ref适配原理

是一种用于移动设备网页开发的CSS3长度单位,它允许页面元素根据根元素(通常是HTML元素)的字体大小来缩放。这种适配方式的核心在于使用媒体查询来根据不同的设备尺寸动态设置HTML的字体大小,然后使用rem作为元素尺寸的单位。当HTML的字体大小发生变化时,页面中的rem单位也会相应地缩放,从而使得页面元素在不同屏幕尺寸上能够保持相对一致的视觉效果。

  1. 使用媒体查询根据不同设备尺寸动态设置HTML的font-size。
  2. 使用rem单位作为元素尺寸的计算基准,使得元素在不同屏幕上保持相对一致的视觉效果。
  3. 通过动态设置meta标签的viewport,让CSS中的1rem等于设备的1px,从而实现等比缩放适配。

在移动端的页面开发中,需要根据不同的手机去适配页面,让页面可以自适应的展示。
也就是说根据屏幕宽度的大小,改变元素和字体的大小,屏幕越宽元素和字体越大。

这个时候我们通常会用到rem作为单位
rem是css3中新增的一个单位,它是一个相对单位
rem用作非根元素的时候,是相对于根元素设定的字体大小,,用于根元素的时候,相对于初始字体的大小

  • 20
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值