媒體查詢無法從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;} }