rem和vw布局

本文介绍了rem和vw布局的原理及实现方法。rem布局通过设置html字体大小来实现页面元素的等比例缩放,利用px2rem插件进行辅助转换。vw布局则直接使用视口宽度的百分比,简化了rem布局中js的使用,适用于新项目。对于历史项目,可以结合vw和rem实现响应式设计。浏览器兼容性是选择布局方案的重要考虑因素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

rem布局

1.rem布局的原理

我们使用rem布局主要是为了实现容器的宽高可以等比例放大或缩小。我们用rem作为容器宽和高的单位,rem是相对单位,1rem=html字体的大小,所以我们只需要在屏幕发生变化时,修改html的字体大小就能实现等比缩放的效果。

那么当前视口宽所对应的html的字体应该是多大呢?

当前视口html字体px = 设计图html的字体大小px  * 当前视口宽px / 设计图的视口宽px

2.rem布局的实现

        //rem布局实现:更改html字体大小
        //1.获取dom
        const docEl = document.documentElement;
        const setHtmlFontSize = ()=>{
          //获取视口宽
          const viewWidth = docEl.clientWidth;
          //根据计算公式得到字体大小
          docEl.style.fontSize = `${viewWidth/75}px`;
        };
      //每次刷新时调用setHtmlFontSize函数
      setHtmlFontSize();
      //当触发resize事件时调用setHtmlFontSize函数
      window.addEventListener('resize',setHtmlFontSize,false);

我们在设置宽高时,使用rem作为单位。vscode中有个插件叫‘px2rem’可以帮助生成px单位换算成rem单位:

此时修改配置,1rem = 10px(修改完配置后需要重新启动编辑器才能生效):

 

 3.扩展flexible

https://github.com/amfe/lib-flexible

vw+rem布局

1.原理

由于rem实现时,我们需要借助js,为解决这个问题,我们将rem布局原理中,当前视口宽使用100vw表示,代替使用js计算,可以得到:

当前视口html字体vw = 设计图html的字体大小px * 100vw */ 设计图的视口宽px

vw+rem布局是将根元素使用vw单位表示,而其他容器使用rem单位表示。适用于更改老项目的布局方式。

如果是新项目,没有历史包袱,且浏览器的兼容性非常好则推荐使用vw布局。

vw布局

vw布局即将根元素的font-size属性和容器的width/height属性都使用vw单位。

计算出测量的值对应的vw单位的值:?vw = 100vw * 容器测量的大小px / 设计图的宽px

vscode中的插件px2vw可帮助将px数值转为vw数值

rem布局、vw布局以及rem+vw布局的选择:

优先使用ve布局方案,如果条件不允许(比如浏览器不兼容vw),再选择rem方案。

修改历史项目的时候,如果该项目使用的是rem布局,可以使用vw+rem方案修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值