实现html5页面在不同手机屏幕上的完美等比缩放，需同时设置viewport的width=device-width和initial-scale=1.0，配合rem动态根字体计算（如750px设计稿下html fontsize=clientwidth/750×100px），并为媒体元素设置max-width:100%和height:auto，断点应基于内容而非设备型号。
要实现 HTML5 页面在不同手机屏幕上的完美等比缩放，核心不是“拉伸”或“裁剪”，而是让整个页面内容按设备宽度同比例缩放，同时保持设计稿的视觉一致性。关键在于视口控制 + 根字体动态计算 + 媒体元素兜底，三者缺一不可。
必须配对设置 viewport 的 width 和 initial-scale
只写 <meta name="viewport" content="width=device-width"> 是常见错误。iOS Safari 会默认放大 1.25 倍，Android 部分机型可能忽略缩放，PC 模拟器直接失效。
正确写法是两者绑定：
- width=device-width：告诉浏览器用设备的 CSS 像素宽度作为布局视口宽度
- initial-scale=1.0：强制初始渲染比例为 1:1，消除系统默认缩放干扰
- 不建议加
user-scalable=no—— 屏幕阅读器和视力障碍用户依赖双指缩放功能
示例：<meta name="viewport" content="width=device-width, initial-scale=1.0">
用 rem + 动态 html font-size 实现等比缩放
rem 单位始终相对于根元素 的 font-size，只要这个值随屏幕宽度线性变化，整个页面就能等比缩放。
常用策略（以 750px 设计稿为例）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 设屏幕宽度为
docEl.clientWidth，则html.style.fontSize = docEl.clientWidth / 750 * 100 + 'px' - 这样 1rem 就恒等于设计稿中 100px 的视觉长度（即 1rem = 100px × 缩放比）
- 所有尺寸按设计稿像素 ÷ 100 写成 rem，比如设计稿按钮高 80px → 写成
height: 0.8rem - 务必在 JS 中监听
resize和orientationchange，横屏切换时重新计算
图片、视频等媒体元素必须自适应容器
即使布局缩放正确，图片若没处理，仍会溢出或变形。
通用规则（适用于 <img>、<video></video>、<iframe></iframe> 及其直接父容器）：
-
max-width: 100%：防止宽度过大撑破容器 -
height: auto：保持原始宽高比，避免拉伸 - 不单写
width: 100%—— 宽高比失衡时会强制变形
CSS 示例：img, video, iframe { max-width: 100%; height: auto; }
断点与适配逻辑要面向内容，而非设备型号
不要写 @media (max-width: 375px) 对应 iPhone SE，也不要根据 iPhone 14 Pro Max 的 1290×2796 去设 media。用户会旋转屏幕、开启“更大文字”系统设置、使用分屏或多窗口模式。
更可靠的做法：
- 按内容自然折行点设断点，例如“导航栏文字开始换行”“卡片从两列变为一列”
- 优先使用
@media (max-width: 768px)而非加and (orientation: portrait) - 字体大小用 rem 或
em，禁用固定px—— 否则高 DPI 屏幕模糊，系统字号调整失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
