纯HTML+CSS可实现真正可用的响应式网页，关键在于：viewport标签必须置于head最前；媒体查询用min-width递进式书写；布局优先选用flex或grid而非浮动。
直接说结论：不用框架、不装依赖，纯 HTML+CSS 就能做出真正可用的响应式网页模板，关键在三件事——viewport 写对位置、媒体查询用 min-width 递进、布局选 flex 或 grid 而非浮动。
viewport meta 标签必须放在 最前面
这是所有响应式失效的第一大原因。如果 <meta name="viewport" content="width=device-width, initial-scale=1"> 没写，或写在 <script> 后面、被注释挡住、甚至误塞进 <body>，移动端就会强制按 980px 渲染——你写的全部 @media 都不触发。
常见错误现象包括：手机上页面缩成一团、需双指放大才能看清；开发者工具切 iPhone 模式，宽度拖动时样式毫无反应。
- 必须写
width=device-width，写成width=375或漏掉就等于没写 - 别加
user-scalable=no，iOS Safari 某些版本下会让maximum-scale失效，还锁死双击放大 - 它得是
<head>里第一个非注释标签，前面不能有其他<meta>或<script>
媒体查询要按 min-width 从窄到宽写
基础样式（小屏）直接写，不包 @media；大屏增强规则用 @media (min-width: 768px) 往上叠加。这样逻辑线性、覆盖可控，不会出现“写了 @media (max-width: 767px) 却忘了重置 display”这种翻车。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
断点别抄模板数字。打开 Chrome 开发者工具的响应式模式，拖动窗口宽度，观察内容何时开始挤、换行、文字难读——记下那个像素值（比如 624px），再取整为 640px 这类好维护的数。
-
@media (max-width: 767px)和@media (min-width: 768px)并列写，缩放 110% 的 iPad 可能卡在中间缝隙里，两边都不命中 - 在
@media里改了布局但漏掉--color-primary这类自定义属性，视觉上像“没生效” - 靠反复
display: none/block切换元素来“模拟换内容”，破坏语义与 SEO
布局别用 float，优先选 flex 或 grid
浮动布局（float: left）在响应式中极易失控：清除浮动麻烦、垂直对齐困难、移动端回退时容易错位。现代项目直接用 flex 或 grid 更稳。
例如三栏结构：.container { display: grid; grid-template-columns: 200px 1fr 200px; gap: 20px; }，移动端只需加一条规则：@media (max-width: 768px) { .container { grid-template-columns: 1fr; } }，三栏自动垂直堆叠——别用 display: block 覆盖，那会破坏 Grid 上下文。
- 兼容 IE11？
gap得回退写成grid-column-gap和grid-row-gap；用flex-direction: column前，先给子项设flex: none; width: 100%，否则flex: 1会继续拉伸导致高度失控 - 全局加
* { box-sizing: border-box; }，否则width: 200px + padding: 10px实际占 220px，三栏直接错位 - 栅格类只管尺寸，
padding和margin得单独控制，别指望一个 class 全包
真正难的不是写多少断点，而是每个断点下是否保住了内容可读性、交互可达性和视觉一致性。比如图片在手机上撑破容器、文字行高太小导致密集恐惧、导航折叠后焦点不可达——这些细节比布局本身更消耗调试时间。
