jquery - 纵向和横向倾斜时如何进行自动响应？

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( “调整大小”，函数 () { ... })。

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