viewport标签必须放在中且参数正确，否则响应式失效；媒体查询应从窄屏写起、用min-width向上增强；图片需用srcset/sizes或picture实现适配。
没加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，其他所有响应式代码都白忙活。
viewport 标签必须放在
这是整个响应式流程的开关，不是装饰。漏掉、放错位置（比如塞进 ）、写成 width=375 或 user-scalable=no，都会导致手机浏览器用默认 980px 宽度渲染，再好看的 CSS 也压不住这个底层行为。
-
width=device-width是强制项，initial-scale=1.0是保底线配置，二者缺一不可 - 别加
maximum-scale或user-scalable—— iOS Safari 有 bug，双击放大可能直接失效，读屏用户也会被锁死 - 检查方式很简单：在 Chrome DevTools 里切到手机模拟模式，右键查看源码，确认这行在
最上方附近
CSS 媒体查询优先用 @media (min-width: ...)，从窄屏写起
移动端优先不是口号，是维护效率的关键。如果你先写桌面样式，再用 @media (max-width: 767px) 覆盖小屏，很容易漏重置某些属性（比如 display: none 写了但没在大屏里设回 block），结果桌面端内容直接消失。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 基础样式（如字体、间距、容器宽度）全部按手机屏写，不加任何媒体查询
- 断点只加
@media (min-width: 768px)、@media (min-width: 992px)这类向上增强型规则 - 断点数值别硬抄 768/1024/1200，打开浏览器调试器拖动窗口宽度，观察你自己的内容“在哪开始挤”，那个值才是真实断点
图片别只靠 img { width: 100%; height: auto; }
这只能防止溢出，但小屏手机照样会下载 2MB 的桌面图，首屏卡顿、流量浪费、用户流失全来了。
- 单图场景够用就用
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px" src="fallback.jpg"> -
sizes属性必须配，否则浏览器不知道在不同视口下该选多宽的图 - 如果要做艺术方向裁剪（比如头像要居中、Banner 要保留主体），就得用
<picture></picture>+<source media="..." srcset="..."></source>
布局别硬写 width: 1200px，改用 max-width + margin: 0 auto
固定像素宽度是响应式最大惯性陷阱。它在大屏上留白，在小屏上直接横向滚动，还容易和 Flex/Grid 冲突。
- 主容器统一用
max-width: 1200px; width: 100%; margin: 0 auto; - 内层结构优先用 Flexbox：
display: flex; flex-wrap: wrap; gap: 1rem;比浮动或 inline-block 稳定得多 - 文字流区域（如文章正文）用
max-width: 65ch（字符数单位）比 px 更符合阅读舒适度，也天然适配不同屏幕
真正卡住人的从来不是语法，而是 viewport 漏写、媒体查询方向反了、图片没做 srcset —— 这三处只要错一个，整个响应式就形同虚设。动手前先盯住这三点，比调一百遍颜色更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
