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

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%...您可以通过创建断点并指定哪些 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%; }
}

就这么简单。如果你不明白，你可以看一些关于响应式设计的教程，或者随时发表评论，我会尽力而为。

祝你好运!