Zurb Foundation：如何在调整大小到较小的屏幕时使按钮变小？

在 Zurb Foundation 4 中，是否有一种方法可以在浏览器尺寸调整得较小或在较小的屏幕上时自动切换到较小的按钮样式？

例如，当屏幕是标准桌面屏幕时，请执行以下操作：

<a href="#" class="primary button">Button 1</a>

当屏幕尺寸缩小时，执行以下操作：

<a href="#" class="small primary button">Button 1</a>

我在水平行中有一个由 6 个按钮组成的按钮组，并且希望在屏幕尺寸调整较小时使用小按钮类，在屏幕为“标准”时使用中按钮类，这可能吗？

这可以通过 Sass/Scss mixin 和媒体查询来完成。在你的 app.scss 中：

$medium-up: "only screen and (max-width:"#{$small-screen}")";
@media #{$small} { 
    .responsive-button {
        @include button($button-lrg, $primary-color, 0px, false, false, false); 
    }
}

@media #{$medium-up} {
    .responsive-button {
        @include button($button-sml, $primary-color, 0px, false, false, false); 
    }   
}

只需使用.responsive-button我们刚刚创建的类。这是一个例子：

<div class="row">
    <div class="small-8 large-8 columns">
        <ul class="button-group round">
            <li><a href="" class="responsive-button">Lorem</a></li>
            <li><a href="" class="responsive-button">Qui</a></li>
            <li><a href="" class="responsive-button">Voluptatibus</a></li>
        </ul>
    </div>
    <div class="small-4 large-4 columns">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

这可以应用于任何其他 Sass mixins 中描述的Zurb 基金会官方文档 http://foundation.zurb.com/docs。查看“媒体查询”并滚动到“按钮”页面的底部。