必须添加标签，否则媒体查询失效、字体错乱、点击区域偏移；它需置于最前，且不可禁用缩放或设固定宽度。
没加 <meta name="viewport"> 标签，其他所有自适应手段都白搭——媒体查询不生效、字体缩成一团、点击区域错位，问题全出在这行代码上。
viewport 标签写错或漏掉，媒体查询直接失效
这是最常被忽略的前置条件。浏览器默认把移动页面当桌面渲染（宽度约 980px），<meta name="viewport" content="width=device-width, initial-scale=1.0"> 才能让它“醒过来”。
- 必须放在
最前面，早于任何 CSS/JS 加载，否则可能触发重排 - 禁用
maximum-scale=1.0或user-scalable=no：会锁死双击放大，违反可访问性要求 - 别写
width=1200这类固定值——它会让小屏强制拉伸，内容横向溢出
容器用 max-width + margin: 0 auto，而不是 width: 100% 套死
width: 100% 看似“占满”，但若父容器没设宽，它可能继承 body 的默认行为，反而撑破视口；真正安全的是“有上限的流动”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 主容器推荐写法：
.container { max-width: 1200px; width: 100%; margin: 0 auto; } - 避免
float布局：它在响应式中极易塌陷，且clear难维护 - 子元素宽度优先用
%或flex-basis，不用px——比如两栏布局写width: 66.66%而非width: 800px
断点按内容崩坏点设，不是按设备型号硬套
别迷信“768px 是平板断点”。真实断点是你拖动浏览器窗口时，某张图被裁、某段文字换行挤成三行、导航栏开始重叠的那个像素值。
- 推荐用
@media (min-width: 768px)而非max-width：符合移动优先逻辑，基础样式写小屏，大屏只增量覆盖 - 3–4 个断点足够：常见设在
480px（窄手机）、768px（竖屏平板）、1024px（横屏/小桌面）、1200px（宽屏） - 图片必须加
max-width: 100%; height: auto;，否则固定height会导致变形或溢出
Flexbox 是默认布局主力，Grid 补复杂二维场景
一维排列（导航、卡片流、表单）无脑用 Flexbox；Grid 留给仪表盘、图文混排这类需要行列强控制的结构。
- 导航栏示例：
.nav { display: flex; flex-direction: column; } @media (min-width: 768px) { .nav { flex-direction: row; } } - 卡片列表推荐
flex-wrap: wrap+flex-basis: calc(33.333% - 20px)控制列数和间距 - IE11 兼容注意：
flex: 1要拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;
真正难的不是写多少断点或用什么布局，而是每次改样式后，手动拖动浏览器宽度看内容是否“自然断裂”——那个瞬间才是你该加断点的地方。别依赖模拟器，真机连 USB 调试一次，比十次 Chrome DevTools 更准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
