H5在移动端尺寸适配方案

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

2.4、postcss-px-to-viewport-8-plugin三方库自动转换（推荐使用）