前几天见到有同事讨论这个问题，今天有时间了就把目前我知道的移动端开发时，对于尺寸处理的方法整理一下

首先是大部分人都熟悉的rem了，rem的值等于文档对象字体大小，默认为16px，我们做移动端开发时，通常是通过视图宽度来计算rem的值，从而达到响应页面的效果

js计算rem

1
2

let element = document.documentElement;
element.style.fontSize = `${element.clientWidth / 3.75}px`;

通常设计给的设计图都是375px的宽度，这样出来的1rem对应设计图100px，算是一个个人习惯吧，因人而异，我觉得这么比较好计算

css计算rem

1
2
3

html{
    font-size: calc(100vw / 3.75);
}

通过直接修改html字体元素也可以修改rem值，原理同上

设置页面缩放宽度

如果不想计算rem的话还有一种方式，就是直接修改meta标签

1

<meta name="viewport" content="width=375, user-scalable=no">

将页面宽度固定设置为375px，就会起到如下的效果

768px的宽度被强制缩放为375px