方框在较小的屏幕上调整为矩形

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

您可以轻松管理使用媒体查询构建网格大小调整。

例如，对于小于640px的屏幕，将列设为100％...您可以通过创建断点来实现此目的，并指明哪些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%; }
}

这很简单。如果你没有得到它，你可以看一些关于响应式设计的教程，或者随时留下评论，我会更好。

运气！