必须添加标签，否则响应式布局在手机上无法正常使用；需设width=device-width和initial-scale=1.0，禁用user-scalable=no；图片视频须加max-width:100%和height:auto；断点优先用em/rem；真机测试不可替代devtools。
HTML响应式布局不依赖移动适配，但没有移动适配的响应式页面在手机上大概率无法正常使用——因为缺少视口控制，浏览器会按桌面模式渲染，内容被压缩、文字不可读、点击区域错位。
必须加 <meta name="viewport">，否则媒体查询基本失效
很多开发者写了 @media (max-width: 768px) 却发现小屏没反应，根本原因是没声明视口。移动端浏览器默认使用约 980px 宽的虚拟视口，768px 断点在逻辑上永远不匹配。
-
width=device-width让视口宽度等于设备逻辑像素（如 iPhone 15 是 393px），这是所有断点生效的前提 -
initial-scale=1.0防止 iOS Safari 自动缩放，避免字体/按钮被意外压扁 - 不要加
user-scalable=no—— 会损害可访问性，WCAG 不推荐
max-width: 100% 不是万能的，图片和视频要配合 height: auto
只写 img { max-width: 100%; } 在某些安卓 WebView 中仍可能拉伸变形，尤其当父容器未设宽高时。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须同时加
height: auto，保证宽高比不变 - 对
<video></video>同样适用，否则全屏按钮可能消失或错位 - 如果用
<picture></picture>+srcset，记得每个<source></source>的media属性要与 CSS 媒体查询逻辑一致，否则加载错资源
Flexbox/Grid 断点要避开“像素陷阱”，优先用 em 或 rem
写 @media (max-width: 768px) 看似直观，但 768px 是物理像素还是逻辑像素？不同 DPR 设备下实际触发点会漂移。W3C 推荐用相对单位断点。
- 以默认 16px 字体为基准，
48em == 768px，语义更稳定 - 配合根字体动态计算（如 JS 设置
document.documentElement.style.fontSize = `${window.innerWidth / 10}px`），才能让 rem 布局真正“随屏缩放” - Grid 的
minmax(300px, 1fr)中的300px建议换成18.75em，避免小屏下卡片过窄仍强行两列
测试不能只看 Chrome DevTools 的“Responsive”模式
DevTools 模拟器只改视口尺寸，不模拟真实 DPR、触摸事件、系统字体缩放或 iOS Safe Area，很多问题在线下测不出。
- 真机测试至少覆盖：iPhone（iOS 17+）、Pixel（Android 14）、华为鸿蒙（HarmonyOS 4+）
- 重点检查：固定定位元素是否被键盘顶起、
position: fixed导航栏在 Safari 滚动时是否闪烁、input[type="date"]弹出层是否遮挡内容 - 用 Lighthouse 跑一次移动端审计，重点关注 “Tap targets are not sized appropriately” 和 “Content is sized correctly for the viewport” 两项
最常被忽略的是：视口标签必须放在 最前面，且不能被 JS 动态插入——某些 SSR 框架（如 Next.js App Router）若在组件内用 useEffect 注入，会导致首屏渲染阶段已错过 viewport 解析时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
