响应式HTML设计：页面内容等比例缩放问题咨询

核心思路 #

要实现页面缩放时元素维持原有比例，关键是用相对视口单位（如vw/vh）或动态尺寸函数（如min()）配合aspect-ratio，再通过布局实现居中。以下是针对你场景的具体实现：

方案一：红色正方形占满视口（溢出部分隐藏） #

此方案下红色正方形始终保持正方形，视口非正方形时超出部分自动隐藏，视觉上保持“占满全屏”效果：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden; /* 避免溢出内容产生滚动条 */
        }
        .red-square {
            width: 100vw;
            height: 100vh;
            aspect-ratio: 1/1; /* 强制锁定正方形比例 */
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto; /* 视口非正方形时让元素居中显示 */
        }
        .green-square {
            width: 50%;
            height: 50%;
            aspect-ratio: 1/1;
            background: green;
        }
    </style>
</head>
<body>
    <div class="red-square">
        <div class="green-square"></div>
    </div>
</body>
</html>

方案二：红色正方形适配视口较小边（无溢出） #

如果希望红色正方形始终完整显示在视口中、无溢出，可使用min()函数取视口宽高的最小值作为元素尺寸：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .red-square {
            width: min(100vw, 100vh);
            height: min(100vw, 100vh);
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 绝对定位+transform实现全局居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .green-square {
            width: 50%;
            height: 50%;
            aspect-ratio: 1/1;
            background: green;
        }
    </style>
</head>
<body>
    <div class="red-square">
        <div class="green-square"></div>
    </div>
</body>
</html>

为什么之前的aspect-ratio没生效？ #

大概率是你没配合相对尺寸单位（如vw/vh、百分比）使用。如果给元素设置固定像素尺寸，aspect-ratio只会调整另一维度，但无法跟随视口缩放适配。必须让元素的基础尺寸依赖视口或父容器的相对尺寸，才能实现缩放时的比例保持。

内容的提问来源于stack exchange，提问作者Sandra