如何防止更大的宽度范围应用于精确的媒体查询宽度？

Question

我使用的 CSS 媒体查询具有较大的宽度范围，但是当屏幕宽度与较小范围的精确值匹配时，较大范围的样式也会应用。 例如：

@media only screen (max-width: 2000px) { }

/*//////////////////////////////////////////////////////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//////////////////////////////////////////////////////*/

当屏幕宽度恰好为 800px * 465 时，确切的给定媒体查询应该可以工作，我已经单独测试过并且它可以工作，但是应用了更大范围的 @media only 屏幕和（最大宽度：2000px）样式。我希望 800px 的确切媒体查询样式优先，并避免与更广泛的 max-width: 2000px 范围重叠。

如何构建媒体查询以防止这种重叠，并确保仅将正确的样式应用于精确的宽度，而不受较大范围的干扰？

提前致谢！

Answer 1

不要考虑范围，而要考虑覆盖。在样式表的主要部分中指定所有移动样式，然后在需要覆盖更宽屏幕的样式的任何地方，按宽度递增的顺序添加

@media (min-width: __px)

规则。

.class {
  /* mobile styles first */
}

@media (min-width: 750px) {
  .class {
    /* tablet styles next */
  }
}

@media (min-width: 1000px) {
  .class {
    /* desktop styles last */
  }
}