html - 媒体查询不从宽度 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;}
}