新增桌面端media query影响移动端及iPad视图该如何解决？

问题核心原因 #

• 媒体查询语法顺序错误：@media screen only and 属于不规范写法，正确顺序应为 @media only screen and，错误顺序会导致部分浏览器解析异常，样式作用范围溢出到小屏设备。
• 断点范围设置不合理：你当前使用的50em（即800px）最小宽度阈值，会覆盖iPad等平板设备的横屏状态，无法区分平板和桌面端。
• 如果你使用原生CSS开发，嵌套在选择器内部的媒体查询兼容性极差，目前大部分移动端浏览器不支持CSS原生嵌套规则，会导致整段样式解析失败，反而破坏原有移动端的正常样式。

正确实现方案 #

1. 调整断点与判断条件 #

要仅匹配桌面端设备，可将最小宽度阈值设置为1024px（即64em，覆盖常规iPad横屏的最大宽度），同时追加hover: hover条件过滤不支持鼠标悬停的平板、手机触摸设备，匹配精准度更高。

2. 规范代码写法 #

如果使用Sass/Less等CSS预处理器，写法如下：

.split {
  /* 这里仅放移动端、平板通用的默认样式，即你已开发完成的移动端视图代码 */
  display: block;
  /* 其他原有移动端样式 */

  /* 仅桌面端生效的样式，仅做属性覆盖，不要重复写和默认样式一致的属性 */
  @media only screen and (min-width: 64em) and (hover: hover) {
    display: flex;
    /* 其他桌面端专属样式 */
  }
}

如果使用原生CSS，不要嵌套媒体查询，拆分写法如下：

/* 优先级最高的默认样式：仅放移动端、平板通用代码 */
.split {
  display: block;
  /* 其他原有移动端样式 */
}

/* 仅桌面端触发的样式，仅在匹配条件时覆盖默认样式 */
@media only screen and (min-width: 64em) and (hover: hover) {
  .split {
    display: flex;
    /* 其他桌面端专属样式 */
  }
}

注意事项 #

• 严格遵循移动端优先原则：默认样式全部为小屏设备样式，媒体查询内仅写桌面端需要修改的属性，不要在全局样式中写入桌面端专属属性，从根源避免样式溢出影响小屏。
• 如果需要兼容更大尺寸的平板，可根据实际需求调整min-width阈值，比如设为1200px（75em）彻底排除所有平板设备。

内容的提问来源于stack exchange，提问作者user15487835