viewport标签必须置于head最前，否则媒体查询失效；断点应采用min-width渐进增强，结合实际布局断裂点设定；Flexbox中优先使用flex-basis而非width防换行；折叠屏需配合JavaScript监听屏幕变化。
viewport 标签必须放在 最前面，否则所有媒体查询都失效
平板显示异常的首要原因不是 CSS 写得不对，而是 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 缺失或位置错误。没有它，iOS 和 Android 浏览器默认以约 980px 宽度渲染页面，@media 规则根本不会触发。
这个标签必须满足三个条件：
- 必须写全
width=device-width，不能只写initial-scale=1.0 - 必须出现在所有
<link rel="stylesheet">和<style>之前 - 不能加
maximum-scale=1.0或user-scalable=no，否则双击缩放失效、可访问性受损
验证方式：用 Chrome DevTools 切换 iPad Pro 模拟器，在 Elements 面板里看 <head> 中的 viewport 值——横屏应显示 width=1024，竖屏应为 width=768，不是 980。
断点别硬套 768px，用 min-width + 内容驱动才可靠
直接写 @media (max-width: 768px) 是把平板当“大号手机”处理，结果 iPad Air 竖屏（820px）、Surface Pro（1080px）全被漏掉，反而套进桌面样式里，侧边栏消失、文字过小、卡片错位。
立即学习“前端免费学习笔记（深入）”；
正确做法是移动优先 + min-width 渐进增强：
- 基础样式（手机）不包任何
@media，设flex-direction: column、font-size: 1rem、width: 100% - 第一层平板断点从
@media (min-width: 768px)开始，覆盖竖屏 iPad 和主流安卓平板 - 第二层加
@media (min-width: 1024px)处理横屏平板和小桌面，比如让导航栏变横向、主内容区加max-width: 1200px - 断点值来自实际布局断裂点：拖动浏览器宽度，记下卡片从 3 列→2 列、文字首次换行、图片比例失真的像素值，再向上取整为 900px、1440px 这类易维护值
Flexbox 中用 flex-basis 比 width 更稳，尤其防换行
在平板上用 width: 33.33% 做三列，常因 padding/margin/border 导致总宽超 100%，直接换行；而 Flexbox 的 flex 属性能自动协调剩余空间。
推荐写法：
-
.grid-item { flex: 1 1 280px; min-width: 280px; }—— 允许拉伸收缩，基础宽度 280px，最小不小于 280px - 避免
flex: 0 0 33.33%，它禁止拉伸，在平板横屏下留白严重 - 表单控件统一设
width: 100%，但父容器要用display: flex; flex-direction: column;控制堆叠顺序，而不是靠 float 或绝对定位
折叠屏和平板横竖屏切换时，仅靠宽度断点不够
华为 Mate X5、三星 Z Fold 这类设备，外屏（约 320–420px）和内屏展开态（约 900–1800px）可能报告相同 CSS px 宽度，纯靠 min-width 无法区分双屏场景。
需要额外补充逻辑：
- 监听
resize和orientationchange组合事件，捕捉横竖屏切换瞬间 - 用
window.innerWidth和screen.width差值辅助判断是否处于分屏或多窗口模式 - 对关键模块（如导航栏、侧边栏）用
matchMedia()主动监听 viewport 变化，而非只依赖 CSS 媒体查询 - 避免混用
max-width和min-width，例如@media (max-width: 899px)和@media (min-width: 900px)在缩放 110% 时会出现 899.5px 这种中间值，导致样式完全丢失
真正难的不是写多少断点，而是让每个断点都对应一次真实的布局妥协——内容开始挤、换行、裁切、失衡的那个像素点，才是你该停笔的地方。
