媒体查询断点说明答案

【问题标题】：Media Queries breakpoints clarification媒体查询断点说明
【发布时间】：2022-02-01 13:06:06
【问题描述】：

我已经设置了这些断点

    X-Small devices (portrait phones, less than 576px) 
@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

 Small devices (landscape phones, less than 768px) 
@media (max-width: 768px) {
    body {
    background-color: blue;
  }
}

Medium devices (tablets, less than 992px) 
@media (max-width: 992px) {
    body {
    background-color: green;
  }
}

 Large devices (desktops, less than 1200px) 
@media (max-width: 1200px) {
    body {
    background-color: purple;
  }
}

 X-Large devices (large desktops, less than 1400px) 
@media (max-width: 1400px) {
    body {
    background-color: yellow;
  }
}

如果我尝试调整屏幕大小，为什么颜色总是黄色并且不随断点变化？

【问题讨论】：

因为max-width: 1400px 也适用于较小的屏幕。要么将大屏幕放在顶部，以便小屏幕的查询覆盖该值，要么使用@media (min-width: value) and (max-width: value) { ... }
你需要定义@media (max-width: ...)的递减顺序，比如1400px然后1200px然后992px等等......然后它会正常工作。

标签： html css responsive-design frontend

【解决方案1】：

因为max-width: 1400px 也适用于较小的屏幕。要么将大屏幕放在顶部，以便小屏幕的查询覆盖该值，要么使用@media (min-width: value) and (max-width: value) { ... }

从最大到最小的屏幕开始：

@media (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

@media (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

使用and-关键字：

@media (max-width: 576px) {
  body {
    background-color: red;
  }
}

@media (min-width: 577px)
  and (max-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 769px)
  and (max-width: 992px) {
  body {
    background-color: green;
  }
}

@media (min-width: 993px)
  and (max-width: 1200px) {
  body {
    background-color: purple;
  }
}

@media (min-width: 1201px)
  and (max-width: 1400px) {
  body {
    background-color: yellow;
  }
}

【讨论】：