更改容器宽度属性时如何触发列响应？答案

【问题标题】：How to trigger column responsiveness when you change container width property?更改容器宽度属性时如何触发列响应？
【发布时间】：2020-09-03 01:18:24
【问题描述】：

所以我正在制作一个模板生成器应用程序，用户可以在其中自定义自己的模板。其中一项功能是即使在他们的桌面上也能看到他们的网站在其他设备（平板电脑和移动设备）中的样子。我可以将模板的宽度更改为各自的设备宽度，但无法触发移动设备和表格宽度中的列响应。

因此，在桌面宽度中，一行应该有 3 列，而在移动设备和平板电脑中，每行应该只有一列。即使我已经更改了包装器的宽度，列也不会堆叠。

简化的 HTML 文件

<span id = "desktop-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">desktop_windows</i>
</span>
<span id = "tablet-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">tablet</i>
</span>
<span id = "phone-resolution" class="icon has-text-black has-cursor">
    <i class="material-icons md-24">phone_iphone</i>
</span>
<div class="container-wrapper">
    <div class="resolution-wrapper center-item">
        <section class="section">
            <div class="container">
                <div class="columns">
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                    <div class="column">Card Content</div>
                </div>
            </div>
        </section>
    </div>
</div>

Javascript (jquery)

$('#desktop-resolution').click(function() {
    var width = $('.container-wrapper').width();
    $('.resolution-wrapper').width(width);
});

$('#tablet-resolution').click(function() {
    $('.resolution-wrapper').width(768);
});

$('#phone-resolution').click(function() {
    $('.resolution-wrapper').width(375);
});

我正在使用 Bulma CSS 框架。我认为问题在于 bulma 使用媒体查询，而媒体查询着眼于整体屏幕大小，而不是包装器来触发响应属性。有关如何解决此问题的任何提示或指示？

该功能应如何工作的示例：https://themes.getbootstrap.com/preview/?theme_id=47394

【问题讨论】：

媒体查询适用于设备宽度，而不是容器宽度。在这里，您正在更改容器的宽度所以这不是 Bulma 框架的问题。您可以使用 iframe 实现与附加示例中相同的功能。可能是，这个答案会对你有所帮助。

标签： html jquery css bulma

【解决方案1】：

我所做的实际上只是将is-multiline 添加到columns 类，并在容器宽度为移动时将is-full 添加到column 类，并在容器宽度为台式机和平板电脑时删除它们。

之前（JS）

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
    });

之后（JS）

    $('#desktop-resolution').click(function() {
        var width = $('.container-wrapper').width();
        $('.resolution-wrapper').width(width);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#tablet-resolution').click(function() {
        $('.resolution-wrapper').width(768);
        $('#product-column').removeClass('is-multiline');
        $('#product-column > div').removeClass('is-full');
    });

    $('#phone-resolution').click(function() {
        $('.resolution-wrapper').width(375);
        $('#product-column').addClass('is-multiline');
        $('#product-column > div').addClass('is-full');
    });

【讨论】：