必须加，否则移动端页面会按980px桌面宽度渲染导致文字过小、按钮点不准；标准写法是，须置于最前。

必须加 ，否则移动端直接失效

不加这行，手机浏览器会按桌面宽度（通常 980px）渲染页面，文字小得看不清，按钮点不准——这不是 CSS 能修的。它必须放在 最前面，且只写一次。

标准写法是：

常见错误包括：

• 漏掉、写在 CSS 后面，导致样式先加载再重排
• 加了 user-scalable=no 还声称“适配无障碍”，实际禁用缩放违反 WCAG
• 用 max-device-width（已废弃），应统一用 max-width

标签不加 max-width: 100% 就会横向溢出

哪怕父容器用了百分比， 默认是固有尺寸，小屏上直接撑破布局。CSS 必须全局覆盖：

img {
  max-width: 100%;
  height: auto;
}

注意两点：

• 别只写 width: 100% —— 会导致图片拉伸变形
• 如果图是背景，就该用 background-size: contain 或 cover，而不是塞
• 高分辨率屏需要 srcset，但普通响应式场景下，单图 + max-width 已够用

语义化标签本身不响应式，但影响媒体查询逻辑

、

、

这些标签不会自动变宽变窄，但它们让 CSS 选择器更清晰、断点更可控。

例如，想在手机上隐藏侧边栏，写 @media (max-width: 768px) { aside { display: none; } } 比写 .col-3 { display: none; } 更易维护。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

容易忽略的点：

• 和
  视觉上没区别，但前者能被屏幕阅读器识别结构，影响可访问性测试
• 嵌套过深（如
  ...）会让媒体查询选择器冗长难调试

  不要为了“语义化”强行套标签，比如纯装饰线条用

  ---

  反而增加语义噪音

  Flexbox 容器里子元素别用固定 width: 300px

  Flex 布局的响应式能力来自弹性分配，一旦子项设死像素宽度，flex-wrap 就可能失效或换行错乱。

  正确做法是：

  • 用 flex: 1 让子项等分剩余空间
  • 用 flex: 0 1 300px 表示“不放大、可缩小、基准 300px”，比 width: 300px 安全
  • 配合 min-width: 0 防止文本溢出（尤其内联元素或长单词）

  典型翻车现场：导航菜单项写成 nav a { width: 120px; }，小屏下文字被截断或换行错位。

  真正卡住人的往往不是技术多难，而是 viewport 标签漏了、图片没约束、或者 flex 里混着 px 宽度——这些地方一错，整个响应式链条就断在开头。