在移动端网页开发中，比例失调是常见的问题。页面在手机上显示时元素过大、间距异常或者整体被缩小，通常是因为没有正确设置视口以及使用了固定的像素单位。通过viewport配合rem，可以让页面按照设备宽度等比例缩放，从而保持设计稿的真实比例。
为什么会出现比例失调
浏览器默认会以980px左右的宽度渲染页面，然后再缩小到设备屏幕中，这就导致使用px写的布局在手机上看起来比例不对。另外，不同设备的物理像素和逻辑像素不同，固定px无法自适应。
使用viewport控制视口
在HTML的head中添加如下meta标签，可以让页面宽度等于设备宽度，并且禁止用户缩放，这是移动端适配的第一步。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
使用rem实现等比缩放
rem是相对于根元素<html>字体大小的单位。我们只需要用JavaScript动态设置根字体大小，就能让所有使用rem的元素跟着屏幕宽度变化。
动态设置根字体大小
常见做法是把设备宽度的十分之一作为根字体大小，例如375px宽的屏幕对应37.5px。
// 根据屏幕宽度动态设置html的font-size
(function () {
function setRem() {
var width = document.documentElement.clientWidth;
// 以设计稿375为基准，根字体为宽度的十分之一
document.documentElement.style.fontSize = width / 10 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
})();
在CSS中使用rem
假设设计稿上一个按钮宽度是75px，在375基准下换算为2rem（75除以37.5）。
.btn {
width: 2rem;
height: 1rem;
font-size: 0.4rem;
}
使用媒体查询做兜底
为了防止极端宽度的设备字体过大或过小，可以加一段媒体查询限制根字体范围。
@media screen and (min-width: 750px) {
html {
font-size: 75px;
}
}
总结
移动端比例失调的核心解法是：先用viewport锁定设备宽度，再用JS计算rem基准值，最后把设计稿的px统一换成rem。这样无论在什么尺寸手机上，页面都能保持完美比例缩放。