如何让媒体查询根据屏幕宽度调整 div 大小？

Question

我正在为我的网站开发一个搜索引擎，结果显示在页面中间的 div 中。因为我希望搜索引擎部分也可以在移动设备上使用，所以我决定使用媒体查询将包含搜索结果的 div 的宽度更改为 100%，当屏幕宽度为小于或等于 500px，使用以下媒体样式规则：

#result_box {
    width: 60vmin;
    min-height: 100vh;
    background-color:red;
}

@media screen and (max-width: 500px) {
    #result_box {
        width:100%;
    }
}

使用 html 的以下块：

 <body>
        <?php $var_value = $_SESSION['query_literal']; ?>
       
        <div class="result_entry">
            
            <hr id="seperator">

            <div id="result_box">
                
            </div>
        </div>
    </body>

但是，我的'result_box'的宽度在移动设备上测试时仍然是60vmin。有谁知道我该如何更改它？

Answer 1

我很确定你没有在 header 中正确设置视口元数据或者根本忘记了它。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

有了这个，浏览器就知道如何控制页面尺寸和缩放。
基本上没有它，您的网站将无法正常运行。

width=device-width 表示您将页面宽度设置为跟随设备的 screen-width

initial-scale=1.0 将页面加载时的缩放级别设置为 1

如何让媒体查询根据屏幕宽度调整 div 大小？

How can I get media query to resize div based on the width of the screen?

html

css

styling