我如何在单个 CSS 文件中应用不同的媒体查询。我正在应用以下查询，但只有最新的查询有效。
@media only screen and (max-width: 500px){
css styling here
}
@media only screen and (max-width: 600px){
css styling here
}
如果您为相同元素定义相同的 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 */
}
HTML 文档的标签中应添加meta 标签<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;}
}
| 归档时间： |
|
| 查看次数： |
27642 次 |
| 最近记录： |