h5页面适配不同分辨率的核心在于设置viewport、使用rem弹性布局、图片响应式处理和媒体查询微调。1. 设置viewport元标签，通过width=device-width、initial-scale=1.0等属性确保页面正确识别设备宽度并禁用缩放；2. 使用rem单位动态计算html字体大小，实现整体布局按比例缩放；3. 图片采用srcset、sizes属性及background-size等技术适配多分辨率屏幕，建议提供@2x/@3x高清资源；4. 通过媒体查询对极端分辨率做细节调整，如按钮字体大小或容器宽度控制，提升在折叠屏、平板等设备的显示效果。
在H5页面开发中，适配不同分辨率屏幕是每个前端开发者都会遇到的问题。尤其在移动端，设备种类繁多，屏幕尺寸和像素密度差异大，如果不做好适配，页面很容易出现布局错乱、字体模糊、按钮点击区域不准等问题。要实现“终极”适配方案，核心在于灵活运用视口设置、弹性布局和动态计算。
1. 设置正确的 viewport 元标签
这是 H5 页面适配的第一步，也是基础中的基础。不设置或设置错误的 viewport，会导致页面缩放异常或者无法正确识别设备宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
width=device-width：让页面宽度等于设备的逻辑像素宽度。 -
initial-scale=1.0：初始缩放比例为1，避免自动缩放带来的问题。 -
user-scalable=no：禁止用户手动缩放（根据项目需求决定是否启用）。
小贴士：有些旧手机浏览器可能不完全支持这些属性，建议结合 JS 动态调整。
2. 使用 rem 单位进行弹性布局
rem 是相对于 html 标签 font-size 的单位，通过动态修改 html 的字体大小，可以实现整体页面按比例缩放。
实现思路：
- 页面初始化时获取设备宽度（clientWidth）
- 计算一个合适的 font-size 值并赋给 html
- 所有元素使用 rem 单位来定义宽高、字体大小等
示例代码：
function setRem() {
const baseSize = 375 // 设计稿宽度
const scale = document.documentElement.clientWidth / baseSize
document.documentElement.style.fontSize = 20 * Math.min(scale, 2) + 'px'
}
window.addEventListener('resize', setRem)
setRem()注意：设计稿通常以 iPhone6（375px）为准，这样适配起来更容易对齐。如果你的设计稿不是这个尺寸，记得调整 baseSize。
3. 图片与媒体适配处理
图片是最容易出问题的部分，尤其是高清图在 Retina 屏幕上模糊的问题。
几个关键点：
- 使用
srcset和sizes属性加载响应式图片 - 对背景图使用
background-size: cover或contain - 给 img 标签设置
width: 100%配合height: auto来保持比例
@@##@@
提示：图片资源尽量提供 @2x 和 @3x 版本，适配高分辨率屏幕时效果更好。
4. 使用媒体查询做细节微调
虽然有了 rem 和 flex 布局，但在一些极端分辨率下（比如折叠屏、平板横竖屏切换），还是需要借助媒体查询做一些细节调整。
常见用法：
@media screen and (max-width: 375px) {
.btn {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
width: 90%;
}
}- 按照实际设备断点写样式
- 不要过度依赖媒体查询，优先考虑弹性布局
- 可配合 JavaScript 做更复杂的判断逻辑
基本上就这些了。H5 页面的多分辨率适配并不复杂，但有很多细节需要注意。只要把 viewport 设置好、用 rem 控制布局、图片处理得当，再配合媒体查询做补充，就能覆盖大多数场景。
