时间戳

首页 > 解决方案 > 如何让媒体查询根据屏幕宽度调整 div 的大小？

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

问题描述

我正在为我的网站开发一个搜索引擎，其中结果显示在页面中间的 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。有谁知道我该如何改变这个？

标签： htmlcssstyling

解决方案

我很确定您没有在标题中正确设置视口元数据，或者完全忘记了它。

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

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

width=device-width表示您设置为页面宽度以跟随设备的屏幕宽度

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

推荐阅读