这可以通过 Sass/Scss mixins 和媒体查询来完成。在您的 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>
这可以应用于官方 Zurb Foundation 文档中描述的任何其他 Sass mixin 。查看媒体查询并滚动到按钮页面的底部。