Css Zurb基金会：如何使按钮在屏幕上变小？ 在ZURB基金会4中，当浏览器的大小变小或屏幕更小时，是否有自动切换到较小按钮样式的方法？

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

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

当屏幕的大小变小时，请执行以下操作：

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

---

我有一个水平行中6个按钮的按钮组，当屏幕尺寸变小时，我想使用小按钮类，当屏幕为“标准”时，我想使用中按钮类，这是可能的吗？

这可以通过Sass/Scss混合和媒体查询来实现。在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按钮

类。以下是一个例子：

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

Lorem ipsum dolor sit amet

---

这可以应用于中描述的任何其他Sass混合。查看媒体查询并滚动至按钮页面底部。

您是否混淆了

-lrg

和

-sml

或者是故意的？