viewport meta标签错误会导致响应式失效；主布局应分离Flex（一维）与Grid（二维）；媒体查询需兼顾orientation和max-height；Grid优先线性定义；居中用justify-self而非text-align；IE11需Flex/fallback；min-width:0防撑破。
viewport meta 标签写错会导致整个响应式失效
几乎所有移动端显示异常——文字小得看不清、页面横向滚动、按钮点不中——根源都在这行缺失或拼错：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是“锦上添花”，而是现代移动浏览器渲染的开关。
常见错误包括：width=deviceWidth（少个短横）、device_width（下划线）、漏掉 initial-scale=1；加了 maximum-scale=1 或 user-scalable=no 会禁用双指缩放，违反可访问性要求；该标签必须放在 <head> 最顶部，早于任何 CSS/JS，否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏。
主结构用 display: flex，局部区域用 display: grid
别把 Flex 和 Grid 混在同一个容器里做主布局。Flex 适合一维顺序排列（比如 header + main + aside + footer），Grid 适合二维区域划分（比如仪表盘的左栏菜单+右上内容+右下图表）。
典型误用：display: flex 的父容器里，子元素又设 display: grid 做整体分区——语义混乱、调试困难，且 Android 4.4 WebView 等旧环境可能忽略 grid-gap 或 flex-wrap。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 导航栏用 Flex：小屏
flex-direction: column，大屏@media (min-width: 768px) { flex-direction: row; } - 内容区用 Grid：例如
grid-template-columns: minmax(300px, 1fr) 2fr;，比纯百分比更可控 - 侧边栏固定宽？用
flex: 0 0 240px+ 主内容flex: 1，并补上min-width: 0防止长文本撑破布局
媒体查询只按 width 断点会漏掉横屏和小高度场景
很多页面在 iPad 横屏下文字堆叠、表单被虚拟键盘顶飞，就是因为只写了 @media (min-width: 1024px)，却没考虑 orientation 和 max-height。
横竖屏必须显式区分：@media (min-width: 768px) and (orientation: landscape)；弹窗、登录页这类高度敏感组件，要单独加 @media (max-height: 600px) 调整 padding 和 font-size。
别用 max-device-width：它查的是设备物理宽度，已废弃；实际应基于视口宽度，用 max-width。
Grid 中 grid-template-areas 维护成本高，优先用线性定义
grid-template-areas 写起来直观，但改一个区域名就得同步更新所有相关项，没法动态插入新区域，团队协作时极易出错。
更推荐线性定义方式：
- 三栏布局直接写
grid-template-columns: 240px 1fr 320px，清晰、易读、好调整 - 配合
gap控制间距，避免父子margin合并问题 - 居中对齐别依赖
text-align（Grid 子元素不继承），用justify-self: center或place-self: center - IE11 不支持 Grid（哪怕加前缀），若需兼容，得 fallback 到 Flex 或 float
真正容易被忽略的，是 min-width: 0 这类细节——它不显眼，但一旦缺了，含长 URL 或未换行中文的 Flex 子项就会撑破容器，而你可能花半小时排查才发现是这一行没加。
