我正在尝试使用这样的媒体查询:
.search-results {
width: 1000px;
padding-top: 100px;
margin: 0 auto;
@media (max-width: 900px) {
width: 100vw;
padding-top: 40px;
}
}
为了使其在移动设备上看起来不错,它可以在 chrome devtools 中工作,但宽度在移动设备上保持不变。以下是屏幕截图:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
标签包含在<head>
中
@media 规则应该位于类选择器之外。
.search-results {
width: 1000px;
padding-top: 100px;
margin: 0 auto;
}
@media (max-width: 900px) {
.search-results {
width: 100vw;
padding-top: 40px;
}
}