H5在移动端尺寸适配方案
2022-07-13 本文已影响0人
夜凉听风雨
1、rem适配
要使用rem，就要设置root font size，一般我们设置root font size 等于设计稿宽度的十分之一就可以了。比如750px宽度的设计稿，设置root font size为75px即可。也就是说1rem=75px
方式一、自己计算rem
首先要根据页面尺寸变化，设置root font size，然后根据设计稿，自己计算好px和rem的对应关系，再写rem。
window.onpageshow = function() {
setRem();
}
const baseSize = 75;
function setRem() {
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = baseSize * scale + 'px';
}
这种方式较为繁琐 不推荐
方式二、使用vscode插件自动计算
image.png
这里插件设置root font size方法如下：
image.png
image.png
安装后，在输入px单位时，会自动弹出转换为rem的选项。
image.png
方式三、使用postcss库自动计算
公司中比较常用，推荐这种方式。
2、viewport适配
2.1、手动计算（不推荐）
2.2、less或者scss计算（不推荐）
2.3、vscode插件辅助转换
image.png
安装后首先要启用vw支持，否则只有rem，并且还要设置设计稿宽度。
image.png
image.png
再使用px的时候会弹出供选择的vw转换结果。
image.png
