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

时间:2013-12-14 05:46:16

标签: html css zurb-foundation

这是我迄今为止设计的。但是,当我在手机上预览我的网站时,方框相互挤压,形成矩形。如何从较小的屏幕预览时以最佳方式显示它?

enter image description here

enter image description here

以下是用于显示“文章”行的代码:

<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>

1 个答案:

答案 0 :(得分: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%; }
}

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

运气!