HTML无分辨率概念，“模糊”“错位”等问题90%源于viewport失效、DPR未对齐或媒体查询断点脱离内容；viewport标签须置于head最前且写对，禁用固定width和user-scalable=no，断点应按实际容器宽度设定，图片需srcset+sizes，canvas需同步设置宽高与缩放，Flex/Grid垂直居中依赖父容器明确高度。
直接改模板的“分辨率”没意义——HTML 没有分辨率概念，所谓“模糊”“错位”“缩成一团”，90% 是 viewport 失效、DPR 未对齐、或媒体查询断点脱离内容实际撑开宽度导致的。
viewport 标签必须在 最前面且写对
这是所有响应式行为的前提，漏掉或写错，后面全白搭。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须出现在<head>内最靠前位置，不能被 JS 动态插入，也不能被框架 SSR 漏掉 - 别写
width=375或width=1200这类固定值——折叠屏横屏、iPad 分屏、安卓多窗口下会立即崩 - 禁用
user-scalable=no：它既不真正锁住缩放，又违反可访问性，iOS Safari 还可能因此禁用双击放大 - 真机测试时若页面仍可左右拖动，第一反应不是查 CSS，而是打开 DevTools → Elements → 检查
<meta name="viewport">是否存在、是否被覆盖、是否在<head>里
媒体查询断点别照搬“768/1024”，按容器实际宽度设
写 @media (max-width: 767px) 模拟 iPhone，不如写 @media (min-width: 48em)（即容器 ≥ 768px），后者更稳定、更贴近内容真实布局阈值。
- 打开 Chrome DevTools → 切换设备模拟器 → 拖动预览区宽度，眼睛盯着布局“哪里开始挤”“哪列开始换行”，那个像素值就是你的断点
- 同一组件多个断点时，只覆盖需要变的属性，比如只改
flex-direction，别重复写整套padding和font-size - 避免用
max-width做主干样式（如先写小屏，再用max-width覆盖大屏），容易因覆盖顺序出错；推荐移动端优先 +min-width递进增强 - 某些安卓 WebView 不触发
resize，需配合matchMedia('(min-width: 0px)')监听变化，否则 rem 计算失效
大屏模糊不是图太大，是 DPR 没对齐
4K 屏、MacBook Pro、Windows 高缩放显示器上文字/图片/Canvas 发虚，本质是浏览器用低物理像素资源去填充高物理像素区域，插值拉伸导致的。
立即学习“前端免费学习笔记（深入）”；
-
<img>标签必须用srcset+sizes，且只混用w描述符（如"img-800.jpg 800w"），sizes必须写死 CSS 像素宽度（如"(max-width: 768px) 100vw, 50vw"），不能写"100%"或留空 -
<canvas>渲染模糊：只改canvas.style.width没用，必须同步设置canvas.width = rect.width * window.devicePixelRatio和ctx.scale(dpr, dpr)，否则坐标全错位 -
background-image不支持srcset，image-set()在 Safari ≤15.6 静默失败，稳妥做法是用媒体查询兜底：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) - 上线前务必用 Chrome DevTools → Network → Filter
image，看实际加载的是哪张图，别信“写了就生效”
Flex/Grid 容器高度塌陷会让居中失效
写了 justify-content: center 和 align-items: center 却只水平居中、垂直贴顶？问题几乎总是出在父容器高度没撑起来。
- Flex 容器要垂直居中，
align-items: center需要可用空间——父容器得有明确高度参照，比如min-height: 400px或height: 100vh，否则它高度塌陷为 0 - Grid 容器同理：
grid-template-rows: 1fr不起作用，除非父容器本身有高度；若用subgrid，子元素必须设box-sizing: border-box，且禁止设padding或margin - 响应式图片居中不能靠
<img>自己加margin: 0 auto或text-align: center——<img>默认是行内元素，margin: auto对它无效；text-align是父容器属性，写在图片上毫无作用 - 真正起效的是父容器的布局行为：统一用
display: flex，再通过媒体查询切换justify-content，图片本身只需保持max-width: 100%和height: auto
最容易被忽略的是：viewport 生效与否、DPR 动态监听、以及父容器高度是否真实存在——这三处任一出错，所有 CSS 布局都会“看起来对但实际错”。调试时别从样式表往下扒，先确认这三件事是否成立。
