移动端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 会动态变化，导致布局抖动甚至文字缩放异常。
- 根字体大小推荐用
viewportmeta 的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 的真机，不能只信模拟器。
