方形框在較小的屏幕上調整爲矩形

Question

這是我迄今爲止設計的。但是，當我在手機上預覽我的網站時，方形盒子會相互擠壓，形成矩形。如何從較小的屏幕進行預覽時以最佳方式顯示？

這裏是用來顯示 「公司章程」 行代碼：

<div class="row" style="margin-top: 3%"> 
    <div class="small-3 columns"> 
     <h2 class="entry-title">Articles</h1> 
    </div> 

    <div class="small-9 columns"> 

     <?php query_posts(array('category_name=articles', 'posts_per_page' => 4));?>     

      <?php if (have_posts()) : ?> 

       <?php while (have_posts()) : the_post(); ?> 

        <div class="small-3 columns"> 
         <?php get_template_part('content-box', get_post_format()); ?>        
        </div> 

       <?php endwhile; ?>    

      <?php endif; ?> 

    </div>   
</div> 

Answer 1

您可以輕鬆地管理構建網格使用媒體查詢調整。

例如，對於小於640像素的屏幕，將列設置爲100％...您可以通過創建斷點和pscifing哪些CSS規則必須在該屏幕分辨率下進行切換來實現此目的。

下面是一個例子：

.small-9 { width: 40%; } /* At some point, the box will be very small */ 

所以......你這樣做：

@media only screen and (max-width: 680px) { 
    .small-9 { width: 100%; } 
} 

這麼簡單。如果你沒有得到它，你可以看一些關於響應式設計的教程，或者隨時留下評論，我會嘗試更好。

好運！