如何让页面适配全设备？media queries失效问题求助

你的核心问题是媒体查询的书写顺序错误，CSS遵循“层叠优先级”——同一优先级的规则，后面的会覆盖前面的。你现在的规则按屏幕尺寸从小到大的max-width编写，导致小屏幕会触发所有更大尺寸的媒体查询，最后生效的是最下方的规则，和预期完全不符。

修复方案一：调整max-width媒体查询顺序（从大到小） #

把媒体查询按屏幕最大尺寸到最小尺寸排列，这样小屏幕的规则会覆盖大屏幕的：

.box {
  border: 10px solid forestgreen;
  height: 100vh;
  width: 100%;
}

/* 屏幕宽度≤1440px时生效 */
@media only screen and (max-width: 1440px) {
  .box {
    width: 60%;
  }
}

/* 屏幕宽度≤1080px时生效，覆盖上面的规则 */
@media only screen and (max-width: 1080px) {
  .box {
    width: 60%;
  }
}

/* 屏幕宽度≤900px时生效，覆盖上面的规则 */
@media only screen and (max-width: 900px) {
  .box {
    width: 70%;
  }
}

/* 屏幕宽度≤768px时生效，覆盖上面的规则 */
@media only screen and (max-width: 768px) {
  .box {
    width: 100%;
  }
}

修复方案二：改用min-width（从小到大） #

如果习惯从小到大的逻辑，可以用min-width，这样大屏幕的规则在后面，覆盖小屏幕的：

.box {
  border: 10px solid forestgreen;
  height: 100vh;
  /* 默认适配最小屏幕 */
  width: 100%;
}

/* 屏幕宽度≥768px时生效 */
@media only screen and (min-width: 768px) {
  .box {
    width: 70%;
  }
}

/* 屏幕宽度≥900px时生效，覆盖上面的规则 */
@media only screen and (min-width: 900px) {
  .box {
    width: 60%;
  }
}

/* 屏幕宽度≥1080px时生效，和1440px规则一致可合并 */
@media only screen and (min-width: 1080px) {
  .box {
    width: 60%;
  }
}

关键知识点 #

• max-width: X：屏幕宽度小于等于X时触发规则
• min-width: X：屏幕宽度大于等于X时触发规则
• 规则顺序要求：max-width需从大到小编写，min-width需从小到大编写，否则会出现规则覆盖异常。

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