媒体查询断点说明

Question

我已经设置了这些断点

    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;
  }
}

为什么我尝试调整屏幕大小时颜色总是黄色，并且不会根据断点改变？

Answer 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;
  }
}

媒体查询断点说明

Media Queries breakpoints clarification

html

css

frontend

responsive-design