媒体查询依据视口宽度而非设备类型，推荐用min-width设定断点（如768px），避免max-width缝隙；flex布局通过flex-direction等属性响应式切换方向；需添加viewport meta标签防失效，grid可作为大屏增强方案但需考虑兼容性。
怎么用媒体查询区分大屏和小屏
CSS 媒体查询不是靠“设备类型”判断，而是看视口宽度（viewport width）。主流做法是设定一个断点值，比如 768px 或 1024px，超过它算大屏，低于它算小屏。别硬记“手机=小屏”，有些折叠屏展开后视口超 1200px，照样走大屏样式。
- 断点建议优先用
min-width，避免小屏样式被意外覆盖 - 不要写成
@media screen and (max-width: 767px)和@media screen and (min-width: 768px)两套并列——中间可能有 1px 缝隙，改用max-width: 767px和min-width: 768px是安全的，但更推荐只写min-width主流断点，其余用默认流式布局兜底 - 真实项目中，断点应和设计稿对齐，而不是照搬 Bootstrap 的
768px、992px
flex 布局在不同屏幕下怎么切换方向
flex-direction 是最轻量的响应式调整方式。比如导航栏在桌面端横排，在手机端竖排，不用改 HTML 结构，只改 CSS：
.nav {
display: flex;
}
@media (max-width: 767px) {
.nav {
flex-direction: column;
}
}-
flex-wrap: wrap在窄屏下比强行压缩子项更可靠，尤其当子项宽度固定时 - 小屏慎用
justify-content: space-between，容易导致首尾项贴边、中间留白过大；换成center或flex-start更可控 - 大屏下如果子项太多，
flex: 1可能导致过度拉伸，建议配合min-width限制最小尺寸
为什么写了媒体查询但没生效
常见失效原因和排查顺序：
- 没加
<meta name="viewport" content="width=device-width, initial-scale=1">，移动端 Safari/Chrome 会强制以 980px 渲染，媒体查询基于这个宽度而非真实视口 - 媒体查询写在了被
!important覆盖的规则后面，或者选择器权重太低（比如.container .itemvs.item） - 使用了
em或rem单位定义断点，而根字体大小被 JS 动态修改过，导致断点偏移 - 浏览器缩放影响了视口计算（尤其是 Windows + Chrome），调试时先重置缩放为 100%
大屏下用 grid，小屏切 flex 是否可行
可行，但要注意兼容性和维护成本。现代浏览器都支持 display: grid，但 IE11 不支持，若需兼容就得 fallback 到 flex 或 float。
立即学习“前端免费学习笔记（深入）”；
- 不建议在同一个选择器里反复切换
display类型（如从grid切到flex），容易引发渲染抖动或尺寸错乱 - 更稳妥的做法是：默认用
flex实现基础流式，大屏再用@media (min-width: 1200px)升级为grid，利用 grid 的区域划分能力做复杂布局 - 如果 grid 区域名用了
grid-area，小屏下即使 display 切回 flex，这些属性也不会报错，只是被忽略——这是 CSS 的容错机制，可以放心写
实际响应式布局的关键不在“切换得多快”，而在“哪一层该由 CSS 控制，哪一层该交给 JS 或服务端”。视口宽度只是信号之一，用户交互意图、网络状况、prefers-reduced-motion 这些同样影响最终呈现——但那是另一层问题了。
