媒体查询依据视口宽度而非设备类型，推荐用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限制最小尺寸
为什么写了媒体查询但没生效
常见失效原因和排查顺序：
- 没加
，移动端 Safari/Chrome 会强制以 980px 渲染，媒体查询基于这个宽度而非真实视口 - 媒体查询写在了被
!important覆盖的规则后面，或者选择器权重太低（比如.container .itemvs.item） - 使用了
em或rem单位定义断点，而根字体大小被 JS 动态修改过，导致断点偏移 - 浏览器缩放影响了视口计算（尤其是 Windows + Chrome），调试时先重置缩放为 100%
大屏下用 grid，小屏切 flex 是否可行
可行，但要注意兼容性和维护成本。现代浏览器都支持 display: grid，但 IE11 不支持，若需兼容就得 fallback 到 flex 或 float。
