响应式开发中Media Query属性值无法修改的问题排查

你遇到的问题核心在于媒体查询的编写顺序——当使用max-width类型的断点时，必须按照从大到小的顺序编写，否则范围更大的查询会覆盖掉范围更小的规则。

比如你现在的代码里，max-width:1200px的查询写在了max-width:1023px的后面，那么当屏幕宽度在1023px以下时，两个媒体查询的条件都满足（因为1023<1200），而CSS遵循“后定义的样式覆盖先定义的”规则，所以1200px断点里的样式会覆盖1023px的，导致你在1023px里修改的属性无法生效。

解决方法：调整媒体查询的顺序 #

把媒体查询按照最大宽度从高到低的顺序排列，也就是：

1. max-width:1200px
2. max-width:1023px
3. max-width:767px
4. max-width:480px

这样当屏幕宽度缩小到某个断点时，只有比当前宽度大的查询不会生效，更小的查询规则会正确覆盖之前的样式。

修改后的完整CSS代码 #

/* 首先是最大的断点：1200px及以下 */
@media only screen and (max-width: 1200px) {
  .section1 {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(93, 91, 91, 0.67), rgba(93, 91, 91, 0.67)), url(img/patrick-tomasso-71909-unsplash.jpg);
    background-size: cover;
    background-position: center;
    height: 70vh;
  }
  .logo{
    margin-left: 5px;
  }
  .p1{
    font-size: 150%;
    transform: translate(0%, 0%);
    max-width: 100%;
  }
  h4{
    font-size: 120%;
  }
  .sec-1, .sec-2, .sec-3{
    margin-top: 0px;
  }
  .sec-1-ul li a, .sec-2-ul li a, .sec-3-ul li a {
    font-size: 90%;
  }
  h3{
    font-size: 120%;
    margin-top: 2px;
    margin-left: 20%;
  }
}

/* 接下来是1023px及以下 */
@media only screen and (max-width: 1023px) {
  .welcome {
    font-size: 120%;
    width: 1023px;
  }
  .sec-1{
    margin-left: 30px;
  }
  .sec-1-ul li a, .sec-2-ul li a, .sec-3-ul li a {
    font-size: 80%;
  }
  .p1{
    margin: 10%;
    color: white;
    font-size: 100%;
    transform: translate(5%, 10%)
  }
}

/* 然后是767px及以下 */
@media only screen and (max-width: 767px) {
  html{
    font-size: 20px;
  }
  .main-nav li{
    padding: 0;
  }
  .main {
    margin: 0px auto;
    padding-top: 4px;
    font-size: 65%;
  }
  h1{
    font-size: 120%;
  }
  .welcome {
    position: absolute;
    width: 767px;
  }
  .p1{
    color: white;
    font-size: 10px;
    transform: translate(5%, 10%);
    margin: 0;
  }
  .section1 {
    background-color: #ffffff;
    background-image: linear-gradient(rgba(93, 91, 91, 0.67), rgba(93, 91, 91, 0.67)), url(img/patrick-tomasso-71909-unsplash.jpg);
    background-size: cover;
    background-position: center;
  }
}

/* 最后是最小的断点：480px及以下 */
@media only screen and (max-width: 480px) {
  /* 这里可以添加对应样式 */
}

额外提示 #

• 可以用浏览器开发者工具查看元素样式，能直观看到哪些样式被覆盖，帮助快速定位问题。
• 另外不建议给html设置max-width，这类全局宽度限制应该交给页面容器元素，避免影响整体布局逻辑。

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