viewport meta 标签必须写在 <head> 中且仅一次，标准写法为 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则响应式失效；语义化标签提供精准 CSS 作用域和可访问性支持；table 自适应需 table-layout: fixed 配合列宽控制或块级重构；rem 基准应使用 clamp() 或动态 JS 计算并同步所有 rem 尺寸。
viewport meta 标签必须写在 里且只写一次
不加或错放 <meta name="viewport">，所有后续 CSS 响应式逻辑都无效。它不是可选配置，而是浏览器渲染的开关——没它，移动端默认以 980px 宽度渲染，再缩放显示，导致字体模糊、点击偏移、@media 查询完全不触发。
常见错误包括：
• 把它丢进 <body> 或注释里；
• 在 CMS 模板中被多处重复插入，造成冲突；
• 写成 content="width=1200" 这类固定值，让 iPhone SE 强行拉伸内容；
• 混用 user-scalable=no，破坏可访问性，且在 iOS 17+ 上部分场景会阻断 pinch-to-zoom。
标准写法只有一行，且必须放在 <head> 最早位置（紧随 <meta charset> 后）：<meta name="viewport" content="width=device-width, initial-scale=1.0">
语义化标签本身不“自适应”，但决定响应式控制粒度
用 <header>、<nav>、<main>、<aside> 等 HTML5 标签，不是为了“看起来更现代”，而是给 CSS 提供精准作用域。比如小屏下隐藏侧边栏，写 aside { display: none; } 比写 .sidebar { display: none; } 更可靠——前者不会因 class 名重复或 JS 动态添加而失效。
立即学习“前端免费学习笔记（深入）”；
注意两点：
• <main> 必须全页唯一，否则屏幕阅读器跳转错乱；
• <section> 和 <article> 不是样式容器，它们承载语义层级，影响 @media 中选择器的复用性和可维护性；
• 避免用 <div class="header"> 代替 <header>，后者在 Safari VoiceOver 中能被直接识别为“页面头部”，前者需额外加 role="banner" 才等效。
table 自适应不能靠 width: 100% 单打独斗
直接给 <table> 加 width: 100% 很少奏效，因为浏览器默认 table-layout: auto，列宽由最长单元格内容撑开，小屏下极易横向溢出。真正起效的是组合策略：
- 强制布局逻辑：
table { table-layout: fixed; width: 100%; }，否则fixed不生效； - 显式列宽控制：用
<col>或第一行<th>的width属性，如<th style="width: 25%">姓名</th>； - 列数 ≥ 4 或字段语义强时，放弃表格形态，改用块级堆叠：
tr { display: block; }+td::before { content: attr(data-label); }； - 报表类表格必须滚动时，包裹容器加
overflow-x: auto，并确保touch-action: manipulation，否则 iOS Safari 点击 input 会失焦。
rem 基准值更新不能只靠媒体查询硬切
用 html { font-size: 16px; } → @media (min-width: 768px) { html { font-size: 18px; } } 这类静态切换，在高 DPI 屏或用户手动放大字号时会断裂。现代做法是动态计算：
推荐两种落地方式：
• 简单项目：CSS clamp() 替代媒体查询，例如 html { font-size: clamp(14px, 2.5vw, 18px); }；
• 复杂项目：JS 监听 resize 和 pageshow（解决 iOS 页面恢复时缩放丢失），按 document.documentElement.clientWidth / 375 * 16 实时重设 font-size；
• 注意：不要在 JS 中频繁操作 document.documentElement.style.fontSize，改用 CSS 自定义属性（--base-font-size）+ html { font-size: var(--base-font-size); } 更稳定。
最后提醒：所有基于 rem 的尺寸（padding、border-radius、line-height）必须同步适配，漏掉任意一项，视觉就会“局部僵硬”。这不是一次配置就能一劳永逸的事。
