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方案修改。