如何在纵向和横向上倾斜时自动响应？

Question

我有一个网站使用 jaliswall.js ，当用户在纵向和横向模式下倾斜时，我想让它在Android平板电脑上自动响应..

这是 jaliswall.js 的css，以使其响应：

       .wall-column {
            display: block;
            position: relative;
            width: 33.333333%;
            float: left;
            padding: 0 5px;
            box-sizing: border-box;
        }

        @media (max-width: 800px) {

            .wall-column {
                width: 50%;
            }
        }

        @media (max-width: 480px) {

            .wall-column {
                width: auto;
                float: none;
            }
        }

当我以纵向模式加载页面时，它看起来没问题（该项目每行显示2个项目）：

但是，如果我将它倾斜到横向模式，它仍会显示2个项目而不是每行3个项目：

但是，如果我刷新页面，它看起来没问题（该项目每行显示3个项目）：

当我的标签尺寸为 800 x 1232时，肖像， 1280 x 752时​​横向 ..

我的问题是，当我将它从纵向倾斜到横向而不刷新页面时如何使其自动响应？

谢谢！

Answer 1

您可以使用window.addEventListener('resize', function() { ... })或jQuery $(window).on('resize', function () { ... })的resize事件。

您需要在该函数中执行的操作是触发重新计算列，这可能需要对 jaliswall.js 脚本进行一些编辑，以便init()可用在IIFE之外。或者，您可以触发a page reload using location.reload()。

Answer 2

强烈推荐使用display: flex;（包含所有供应商前缀）来处理此类行为。

此外，它现在还在强制性学习css布局。

这里有一个惊人的 post on flexbox，强烈建议你学习它。