html - 在移动屏幕上显示 block

Question

在手机上查看此网站，您就会明白我要做什么。 This is my website

请注意 wix 上的索引如何在移动设备上变为 display: block。我的意思是 你的成功和其他两个盒子。

我尝试做同样的事情，当调整浏览器大小时，它在桌面上运行得非常糟糕，但在移动设备上却没有。

我有 index_whitebox 和 index_whitebox_2 和 index_whitebox_3

它是这样的:

CSS

.index_whitebox{
    min-height: 380px;
    width: 25%;
    position: relative;
    float: left;
    margin-left: 6%;
    border: 2px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    display: inline-block;
}

相同的 CSS，其他两个框的边距略有不同。 至于媒体查询:

CSS

@media screen and (max-width: 500px) {

    .index_whitebox{
        min-height: 0;
        width: 90%;
        position: relative;
        float: none;
        margin-left: auto
        margin: auto;
        border: 2px solid rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        display: block;
    }  

}

HTML

<div class="whitebox_wrapper">
    <div class="index_whitebox">
        <div class="index_title">
            title
        </div>
        <div class="index_image">
        </div>
        <div class="index_article">
            <div class="index_first_cell_text_wrapper">
            </div>
        </div>
        <div id="index_nav_container">
            <a href="contact.html" class="navButton_2">Contact</a>
        </div>
    </div>
</div>

其他框的 html 相同。

Answer 1

把这个放在你的css文件中

@media screen and (max-width: 768px) {
    .header{min-width:100%;}
    #banner{min-width:100% !important;}
    .whitebox_wrapper{min-width:100%;}
    .index_wrapper{width:100%;}
}

可能对你有帮助