响应式布局的实现思路

移动端实现响应式布局的核心是：

  1. 设置 viewport meta；
  2. 用 JS 动态调整根元素 font-size，让 1rem 等于"屏幕宽度 / N"；
  3. 所有布局尺寸使用 rem。

以淘宝 / 网易的经典实现为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    document.addEventListener("DOMContentLoaded", function() {
    // 淘宝响应式多写了下面这 2 句，修改 viewport
    let scale = 1 / window.devicePixelRatio;
    document.querySelector('meta[name="viewport"]').setAttribute('content',
        'initial-scale=' + scale + ', maximum-scale=' + scale + 
        ', minimum-scale=' + scale + ', user-scalable=no');
    // 淘宝+网易响应式都需要的修改 font-size
    document.documentElement.style.fontSize = 
        document.documentElement.clientWidth / 10 + 'px';
    }, false);
</script>
<body>
    <div>
        <div style="
            background: pink;
            height: 2rem;
            width: 8rem;
        ">600px</div>
        <div style="
            background: lightblue;
            height: 2rem;
            width: 8rem;
        ">600px</div>
    </div>
</body>
</html>

补充：

  • 该方案把 html 的 font-size 设置为 window.clientWidth / 10，所以 1rem = 屏幕宽度的 1/10；CSS 中所有尺寸都基于 rem，从而实现"屏幕越宽、元素越大"的等比缩放。
  • 现代替代方案是直接使用 vw 单位：html { font-size: 10vw; }，无需 JS、无需监听 resize，更简洁。
  • 复杂响应式推荐 flex + grid + 媒体查询组合，而不是单一 rem。