媒体查询无法从宽度479px读取到767px？

Question

我有三个媒体查询，范围如下：

@media screen and (min-width: 360px) and (max-width: 479px)
@media screen and (min-width: 480px) and (max-width 767px)
@media screen and (min-width: 768px) and (max-width: 1023px)

问题是我的网站没有读取479px到767px宽度范围内的样式，这是我不明白的，对此建议的任何帮助都非常受欢迎，谢谢！

Answer 1

你忘记了(max-width 767px)上的冒号错误，它应该如下所示：

@media screen and (min-width: 360px) and (max-width: 479px)
@media screen and (min-width: 480px) and (max-width: 767px)
@media screen and (min-width: 768px) and (max-width: 1023px)

这是一个片段

@media screen and (min-width: 360px) and (max-width: 479px){
  body{background:green;}
}
@media screen and (min-width: 480px) and (max-width: 767px){
  body{background:yellow;}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
  body{background:red;}
}