css 选择器在移动端适配注意什么_响应式样式技巧_技术教程

移动端CSS应避免依赖:hover，改用:active或JS切换类；慎用device-pixel-ratio媒体查询，优先使用width断点；避免vw/vh及body/html宽度基准引发抖动；媒体查询需扁平化；自定义属性须设fallback值。

移动端 CSS 选择器别依赖 `:hover`

很多桌面端习惯用 :hover 触发状态样式，但在多数触摸设备上它不可靠：iOS Safari 会延迟触发、Android Chrome 可能根本不触发，或在点击后残留伪类。这不是 bug，是规范行为——触摸没有“悬停”概念。

用 :active 替代部分交互反馈（如按钮按压态），但注意它只在触摸/点击期间生效
对需要持久状态的场景（如菜单展开），改用 JS 切换 .is-open 类，再写 .menu.is-open 样式
避免 nav:hover > ul 这类下拉菜单写法；移动端应默认展示或用点击切换

慎用 `device-pixel-ratio` 媒体查询

@media (-webkit-min-device-pixel-ratio: 2) 这类写法看似精准，实际兼容性差且语义模糊：它匹配的是设备像素比，不是屏幕尺寸或能力。iPhone SE（2x）和 iPad Pro（2x 或 3x）都可能命中，但布局需求完全不同。

优先用 min-width / max-width 按视口宽度断点，例如 @media (max-width: 768px)
若真需区分高清屏（如替换 @1x 图片），用标准语法：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
不要把 device-pixel-ratio 当作“是否是 iPhone”的判断依据——安卓碎片化严重，结果不可控

避免用 `body` 或 `html` 宽度做响应式基准

写 body { width: 100vw; } 或 html { font-size: calc(100vw / 375); } 在 iOS Safari 中容易出问题：当地址栏显示/隐藏时，vw 会动态变化，导致布局抖动甚至文字缩放异常。

根字体大小推荐用 viewport meta 的 width=device-width + rem 配合 JS 动态设置（如 lib-flexible 方案），而非纯 CSS 计算
全屏容器用 width: 100% 而非 100vw，规避滚动条宽度干扰（100vw 包含滚动条区域）
固定高度容器（如 banner）慎用 vh：Safari 地址栏收起时 100vh 会变高，造成底部留白

媒体查询里别嵌套复杂选择器

像 @media (max-width: 480px) { .header nav ul li a { ... } } 这种写法，在低端 Android WebView 或旧版 UC 浏览器中可能解析失败或性能骤降——不是所有渲染引擎都优化了嵌套媒体查询。

把媒体查询提到最外层，结构扁平化：.header nav ul li a { ... } @media (max-width: 480px) { .header nav ul li a { ... } }
避免在媒体查询内使用属性选择器（如 [data-role="tab"]）+ 伪类组合，某些 WebView 会忽略整个规则块
用 CSS 自定义属性（--primary-color）配合 JS 切换主题时，确保 fallback 值存在，因为旧浏览器不支持 var()

:root {
  --btn-bg: #007aff;
}
.btn {
  background-color: var(--btn-bg, #007aff);
}
@media (prefers-color-scheme: dark) {
  :root {
    --btn-bg: #0a84ff;
  }
}

复杂点在于：不同 iOS 版本对 prefers-color-scheme 和 vh 的处理逻辑不一致，测试必须覆盖 iOS 13–17 的真机，不能只信模拟器。