如何在单个 CSS 文件中应用不同的媒体查询。我正在应用以下查询，但只有最新的一个有效..
@media only screen and (max-width: 500px){
css styling here
}
@media only screen and (max-width: 600px){
css styling here
}
【问题讨论】：
标签： css
meta 标签应该添加到 HTML 文档的 <head> 标签中。请检查您是否添加了
<meta name="viewport" content="width=device-width, initial-scale=1">
css 代码的顺序也很重要。请按以下顺序更改顺序：
@media only screen and (max-width: 600px){
body{ background:green;}
}
@media only screen and (max-width: 500px){
body{ background:red;}
}
【讨论】：
如果您为相同元素定义相同的 CSS 属性，则最后一个定义将具有优先权。
在这种情况下，这是一个解决方案：
@media only screen and (max-width: 500px){
/* CSS apply on width between 0 and 500px */
}
@media only screen and (max-width: 600px) and (min-width: 501px){
/* CSS apply on width between 501px and 600px */
}
【讨论】：