移动端HTML布局需先配对viewport、修正meta标签位置、防止图片撑破视口；viewport必须置于最前，内容含width=device-width和initial-scale=1.0；图片加max-width:100%和height:auto；按钮触摸区不低于48px；零基础优先用flex而非grid。
直接上手写移动端 HTML 布局，别先碰 Flexbox 或 Grid——90% 的新手卡在 viewport 没配对、meta 标签位置错、图片撑破视口这三处，导致页面缩放失常、按钮点不中、文字小得看不清。
为什么 viewport 必须放在
移动端浏览器默认按 980px 宽度渲染页面，viewport 是告诉它“请按设备真实宽度来”，否则所有响应式 CSS 都失效。它不是可选配置，是启动开关。
-
viewport必须写在最靠前位置（里） - 常见错误写法：
缺少initial-scale=1.0→ iOS Safari 会自动缩放，文字忽大忽小 - 正确最小集合：
（上线前可保留user-scalable，开发阶段建议先去掉，方便调试缩放） - 不要用
maximum-scale=1.0：会禁用双指缩放，无障碍体验不合格，部分安卓机型还会触发渲染异常
img 和按钮尺寸怎么设才不被手机“吃掉”点击
移动端触摸目标有物理尺寸下限，48×48px 是 WCAG 推荐最小值。但 CSS 中的 px 在高 DPR 屏幕（如 iPhone 15 Pro 的 3x）上会被缩放，所以不能只靠像素值硬写。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 图片必须加
max-width: 100%+height: auto，否则横屏时溢出屏幕，触发横向滚动条（用户第一反应是“网页做坏了”） - 按钮/链接内容区域高度至少设为
min-height: 48px，配合padding保证触摸热区达标；别只设font-size或line-height - 避免
zoom、transform: scale()等缩放类样式：它们会让实际点击坐标偏移，iOS 上尤其明显 - 测试方法：真机打开，用指尖按住按钮不动 1 秒，看是否触发 :active 状态，再快速连点两次，确认无延迟或误触
响应式布局该从 flex 还是 grid 入手
零基础优先用 display: flex，不是因为它更简单，而是因为它的容错率高、调试反馈直接、兼容性覆盖到 Android 4.4+，而 grid 在旧版 WebView 里行为不可控。
- 起步只用三行 CSS：
display: flex、flex-direction: column（竖排）、flex-wrap: wrap（换行），不用管flex-basis或order - 避免嵌套多层 flex 容器：第二层开始就容易出现
align-items冲突，导致子元素莫名居顶或截断 - 媒体查询断点别抄网上“768px / 1024px”：手机屏幕宽度是动态的（比如折叠屏展开后是 1200px），应优先用
max-width+em单位，例如@media (max-width: 40em) - 删掉所有
float相关代码：它和 flex 同时存在时，clear失效，布局会随机塌陷
真正难的不是写几行 flex，而是每次改完 CSS 都要切到 Chrome DevTools 的 Device Toolbar，手动旋转屏幕、拖动宽度滑块、点开 Rendering 面板勾选 “Paint flashing”——只有看到重绘区域稳定、无意外闪烁，才算落地。这点没人提醒，但决定你能不能从“能显示”跨到“能交付”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
