如何防止宽范围媒体查询样式覆盖精确尺寸媒体查询？

问题描述 #

已经为智能手机/平板/iPad设置了独立宽度范围的样式（如100px-500px、501px-1000px），通过.is-smartphone变量控制，这部分正常。但为笔记本/台式机编写精确屏幕尺寸的媒体查询后，设置宽范围的默认样式（比如max-width:2500px或min-width:100px）时，默认规则会错误覆盖已定义的精确尺寸样式。

当前使用的精确尺寸媒体查询代码如下：

///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 800px) and (max-width: 800px) and (min-height: 465px) and (max-height: 465px) { /* laptop screen ( L/P ) --- (laptop 800 * 600 ) --- ---- (actual 800 * 465 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1024 * 768 ) --- ---- (actual 1024 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 585px) and (max-height: 585px) { /* laptop screen ( L/P ) --- (laptop 1280 * 720 ) --- ---- (actual 1280 * 585 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1280 * 768 ) --- ---- (actual 1280 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 665px) and (max-height: 665px) { /* laptop screen ( L/P ) --- (laptop 1280 * 800 ) --- ---- (actual 1280 * 665 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 685px) and (max-height: 686px) { /* laptop screen ( L/P ) --- (laptop 1280 * 1024 ) --- ---- (actual 1024 * 686 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1360px) and (max-width: 1360px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1360 * 768 ) --- ---- (actual 1360 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1366 * 768 ) --- ---- (actual 1366 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1120px) and (max-width: 1120px) and (min-height: 705px) and (max-height: 706px) { /* laptop screen ( L/P ) --- (laptop 1400 * 1050 ) --- ---- (actual 1120 * 705 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1440px) and (max-width: 1440px) and (min-height: 765px) and (max-height: 765px) { /* laptop screen ( L/P ) --- (laptop 1440 * 900 ) --- ---- (actual 1440 * 765 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1600px) and (max-width: 1600px) and (min-height: 765px) and (max-height: 765px) { /* laptop screen ( L/P ) --- (laptop 1600 * 900 ) --- ---- (actual 1600 * 765 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1344px) and (max-width: 1344px) and (min-height: 705px) and (max-height: 706px) { /* laptop screen ( L/P ) --- (laptop 1680 * 1050 ) --- ---- (actual 1344 * 705 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1536px) and (max-width: 1536px) and (min-height: 729px) and (max-height: 730px) { /* laptop screen ( L/P ) starting --- (laptop 1920 * 1080 ) --- ---- (actual 1536 * 730 ) --- */
} /* laptop screen ( L/P ) starting */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////

解决方法 #

1. 调整CSS规则顺序 #

CSS中同优先级的规则，后定义的会覆盖先定义的。把所有精确尺寸的媒体查询，放在宽范围默认样式的后面，这样精确规则就能优先生效，不会被默认规则覆盖。

2. 简化精确尺寸的媒体查询写法 #

不用同时写min-width和max-width等于同一个值，直接用width和height媒体特性，代码更简洁：

/* 示例：替换原来的800px宽465px高的查询 */
@media only screen and (width: 800px) and (height: 465px) {
  /* 样式代码 */
}

3. 用否定媒体查询排除精确尺寸 #

如果不想调整顺序，可以给默认样式的媒体查询加上否定条件，排除所有已经定义精确样式的尺寸。比如：

/* 默认样式：排除所有已定义的精确尺寸 */
@media only screen and (min-width: 100px) and (max-width:2500px)
  and not (width:800px and height:465px)
  and not (width:1024px and height:633px)
  /* 继续添加其他需要排除的精确尺寸组合 */
{
  /* 默认桌面样式 */
}

这种方式适合必须把默认规则放在前面的场景，但如果精确尺寸很多，代码会比较冗长。

4. 重构为标准响应式断点（推荐） #

针对精确屏幕尺寸写样式的做法并不灵活——用户可能会缩放窗口、使用非标准分辨率，这种情况你的精确规则就失效了。更合理的方式是按宽度范围设置断点，比如：

/* 平板以上到小笔记本 */
@media only screen and (min-width: 1001px) and (max-width: 1440px) {
  /* 对应样式 */
}
/* 大笔记本/台式机 */
@media only screen and (min-width: 1441px) {
  /* 对应样式 */
}

如果某些特殊分辨率需要微调，可以在对应断点里再添加精确尺寸的媒体查询作为补充。

内容的提问来源于stack exchange，提问作者Ali Abdul Rehman