浏览器窗口resize时站点自动适配屏幕的实现原理问询

• 针对你观察到的100vh表现异常问题：你自己使用100vh出现适配错误，大概率是没有做全局样式归一化和vh兼容性修正。首先要先做好全局样式重置，消除浏览器默认边距的影响：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow-x: hidden;
}

另外原生100vh在移动端会被浏览器地址栏、工具栏占用可视区域，桌面端调整窗口大小时也可能出现计算偏差，目标站点应该是用JS动态计算实际可视高度，赋值给自定义CSS变量来规避这个问题，示例代码如下：

// 动态计算vh值
function setCustomVh() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--custom-vh', `${vh}px`);
}
setCustomVh();
window.addEventListener('resize', setCustomVh);

容器高度使用自定义变量即可实现完美适配：

.container {
  height: calc(var(--custom-vh, 1vh) * 100);
}

• 针对字号、内容不变形的特点：目标站点没有使用固定px作为元素尺寸单位，而是统一使用rem/em等相对单位，配合根元素字号和视口宽度绑定的规则实现整体等比缩放，不需要编写大量media query手动调整。示例CSS规则如下：

/* 以1920px宽度的设计稿为例，1rem = 19.2px，可按需求调整除数 */
html {
  /* clamp函数用于限制字号的最小、最大值，避免缩放过度 */
  font-size: clamp(12px, calc(100vw / 100), 24px);
}

所有元素的宽高、边距、字号都用rem作为单位时，窗口缩放时所有内容会自动等比例调整，视觉上就不会出现变形错位的问题。

• 布局层面的适配逻辑：目标站点整体采用flex弹性布局或者grid网格布局，子元素尺寸用比例、auto或者百分比定义，没有写死固定像素值，窗口大小变化时布局会自动调整元素排布，不会出现内容溢出或者挤堆的问题。

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