必须先写，否则响应式CSS失效；该标签须置于内且在CSS/JS前，width和initial-scale参数不可错写或省略。

必须先写 ，否则所有响应式 CSS 都不生效。

viewport meta 标签放错位置或参数错误

这个标签不是可选项，是响应式启动开关。手机浏览器默认按 980px 渲染页面，不加它，@media 写得再全也白搭。

• 必须放在 内，且在任何 CSS/JS 加载前 —— 放到 里完全无效
• width=device-width 不能写成 width=375 或 width=768，否则 iPad、折叠屏、安卓平板全会错判视口
• initial-scale=1 不可省略，某些安卓 WebView 会默认缩放到 0.8–0.9
• 别加 maximum-scale，iOS Safari 某些版本下会禁用双击放大，影响可访问性

HTML 结构要用语义化标签，不是堆

响应式不是靠媒体查询“撑”出来的，而是靠 DOM 层级和流动边界决定的。CSS 的 flex 或 grid 布局需要明确的容器锚点。

• 用
  包导航区，不用
  —— 后者无法被屏幕阅读器识别，JS 控制汉堡菜单时也更难操作
• 必须直接包裹
  ，而不是嵌套多层
  —— 否则 display: flex 在小屏切换时容易漏掉层级
• 只能出现一次，它是内容流起点；
  应围绕独立语义块（如“服务介绍”），不是为了套样式而加
• 避免用
  替代

  或

  ，否则媒体查询里改 display 会破坏语义流

  rem 基准不能靠 media query 硬写死

  写 @media (max-width: 768px) { html { font-size: 14px; } } 是典型误区。设备逻辑宽度 ≠ 断点值，iPad Pro 屏幕宽度是 1024px，但 viewport 宽度可能是 834px —— 这个值才是 rem 计算依据。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载

  • 动态计算才可靠：document.documentElement.clientWidth / 375 * 16（375 是设计稿基准宽度，16 是默认根字体大小）
  • iOS 键盘弹出时 clientWidth 不变，但视口被压缩，需监听 focus 事件临时调小 font-size
  • 某些安卓 WebView 不触发 resize，得配合 matchMedia('(min-width: 0px)') 监听变化
  • 媒体查询断点建议用 em 单位，比如 @media (min-width: 48em)（即 ≥768px），比像素值更稳定

  图片和容器宽度要匹配 viewport，不是设计稿像素

  直接写 width: 375px 或 max-width: 100% 而不考虑 DPR 和视口缩放，会导致高分辨率屏上模糊、小屏上溢出。

  • 图片必须用 srcset + sizes，例如：
  • 容器宽度优先用 %、rem、ch，慎用 vw —— 它包含滚动条宽度，iOS Safari 下可能意外截断
  • 避免给 或 设固定 width，这会强制触发横向滚动条

  最常被跳过的其实是 viewport 标签的位置和 initial-scale 参数，以及把 rem 当成静态单位去写媒体查询 —— 这两个点一旦出错，后续所有布局都会漂移，而且很难定位。