如何在縱向和橫向傾斜時使汽車響應？

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肖像時和 752 X風景時 ..

我的問題是，如何讓它自動響應，當我從縱向擺動它以景觀不刷新頁面？

謝謝！

Answer 1

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

所有你需要在功能做的是觸發列，這可能需要jaliswall.js的一個小編輯腳本，以便init()可在IIFE外的重新計算。或者，你可以只觸發a page reload using location.reload()。

Answer 2

這是強烈建議使用display: flex;（與所有供應商的前綴）這種行爲。

這是完美爲你想要做什麼。

此外，它的強制學習如今的CSS佈局。

這裏是一個驚人的post on flexbox，強烈建議你學習它。