必须正确书写<meta name="viewport" content="width=device-width, initial-scale=1">并置于<head>最顶部，否则响应式失效；需结合orientation和max-height媒体查询，优先使用Grid布局图片网格，禁用max-device-width。
必须写对 <meta name="viewport">，否则后续所有 CSS 布局都白搭——这是响应式能否生效的硬性前提，不是可选项。
viewport 标签写错就等于没做响应式
几乎所有移动端显示异常（文字极小、横向滚动条、按钮点不中）都源于这行缺失或拼写错误：
<meta name="viewport" content="width=device-width, initial-scale=1">
-
width=device-width必须一字不差，写成device_width或width=deviceWidth就失效 - 别加
maximum-scale=1或user-scalable=no，除非是自助终端机（Kiosk）场景；否则违反可访问性规范，iOS 和 Android 都会禁用双指缩放 - 该标签必须放在
<head>最顶部，早于任何 CSS/JS，否则 iOS Safari 可能先按桌面宽度渲染再重排，造成闪屏 - 旧版 UC、QQ 浏览器对
initial-scale解析不稳定，不能依赖它做 JS 计算（比如用window.devicePixelRatio算rem基准）
媒体查询只按 max-width 断点会漏掉横屏和小高度场景
很多页面在 iPad 横屏下文字堆叠、表单被软键盘顶飞，就是因为只写了 @media (min-width: 1024px)，却没考虑 orientation 和 max-height。
- 横竖屏必须显式区分：
@media (min-width: 768px) and (orientation: landscape)，不能只靠宽度猜方向 - 弹窗、登录页这类高度敏感组件，要单独加
@media (max-height: 600px)调整padding和font-size - 永远用
max-width/min-width，别用已废弃的max-device-width——它查的是设备物理宽度，而实际应基于视口宽度
Flex 和 Grid 别混用同一容器
Flexbox 适合一维排列（导航栏、卡片横排），Grid 适合二维区域划分（仪表盘、后台页）。混用会导致行为不可控，尤其在 Android 4.4 WebView（Chromium 30）里，flex-wrap 和 grid-gap 可能被忽略。
立即学习“前端免费学习笔记（深入）”；
- 导航栏用 Flex：小屏
flex-direction: column，大屏用@media (min-width: 768px) { flex-direction: row; } - 内容区用 Grid：
grid-template-columns: minmax(300px, 1fr) 2fr，比纯百分比更可控 - 避免嵌套：不要在
display: flex容器里再套display: grid子元素做主布局——语义混乱且调试困难
图片网格别用 flex-wrap，改用 grid-template-columns: repeat(auto-fit, minmax(...))
flex-wrap 在图片尺寸不一致或动态加载时容易断行错位，最后一行留白、间隙不均是常态。Grid 的 auto-fit + minmax() 才是稳定解。
- 核心写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))——每列最小 250px，容器够宽就自动加列，填满整行 - 必须用
gap控制间距，别用margin模拟，否则网格对齐逻辑会崩 - 若图片宽高比差异大，统一加
aspect-ratio: 4/3或套一层div并设overflow: hidden防拉伸变形
真正难的不是写多少断点，而是让每个断点之间过渡自然、不跳变；最容易被忽略的是 viewport 标签位置和 orientation 条件的组合使用——它们不报错，但一旦漏掉，用户在特定设备上就会卡住。
