媒体查询可以在开发工具中使用,但不能在移动设备上使用

问题描述 投票:0回答:1

我正在尝试使用这样的媒体查询:

.search-results {
    width: 1000px;
    padding-top: 100px;
    margin: 0 auto;

    @media (max-width: 900px) {
       width: 100vw;
       padding-top: 40px;
    }
}

为了使其在移动设备上看起来不错,它可以在 chrome devtools 中工作,但宽度在移动设备上保持不变。以下是屏幕截图: mobile desktop

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
标签包含在
<head>

html css media-queries
1个回答
0
投票

@media 规则应该位于类选择器之外。

.search-results {
    width: 1000px;
    padding-top: 100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .search-results {
       width: 100vw;
       padding-top: 40px;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.