移动端布局-rem vw布局
- rem vw布局，实现除图片外的等比例缩放（图片如果只设置宽高，本身就是等比例的）
- em和rem有什么区别
- em：‘em’的值是基于其父元素的字体大小的，由于这种相对性，嵌套的元素使用‘em’可能会导致复合效应，使计算变得复杂
- rem：‘rem’的值是基于根元素（‘通常是<html>’元素）的字体大小（默认是16px），无论元素在文档何处，‘1rem’都与根元素的字体大小相等
- rem布局（需要加载js，消耗一定的性能）
思路：
1.把px改成rem
2.1rem === html的字体大小（可以自己设置）
3.监控屏幕尺寸，尺寸发生改变时，使用js修改html的字体大小（代码示例如下）
function setHtmlFontSize() {
// 获取用户的手机尺寸
const clientWidth =
document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
// 计算html标签对应的字体大小
const htmlFontSize = clientWidth / 75 + "px";
// 通过js来动态修改html标签的字体大小
document.documentElement.style.fontSize = htmlFontSize;
}
// 监控尺寸变化, 每次尺寸变换, 调用setHtmlFontSize函数
window.onresize = setHtmlFontSize;
- rem+vw布局（不需要加载js，性能更好）
vw，视口的宽度为100vw，vw的值取决于移动端的视口大小
只需要修改html的font-size为vw单位，其他的单位为rem，也不需要写js
- vw布局（不需要改变html，也不需要加载js，但需要转换的单位较多）
将所有的px单位修改为vm单位
- 总结
优先使用vm布局方案，如果条件不允许（比如浏览器不兼容vm布局），再选择rem布局方案
修改历史项目的时候，如果该项目是rem布局，可以使用rem+vw方案修改
浙公网安备 33010602011771号