Zurb Foundation 5 - 使按钮响应

Question

在Zurb Foundation 5 - 当浏览器缩小尺寸或缩小屏幕时，如何响应更小的按钮样式？

在StackOverFlow here 上提出并回答了类似的问题，但正确的解决方案不适用于Foundation 5，猜测它只适用于Foundation 4。

当调整大小到较小的屏幕时，按钮当前看起来像这样（$ button-lrg）：

但是我希望按钮在调整为较小的屏幕时看起来更像这样（$ button-sml）：

非常感谢任何帮助！

---

我根据上面类似问题链接的正确答案提出了sass / scss mixin。只需将以下mixin添加到您的＆＃34; app.scss＆＃34;文件：

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

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

Answer 1

您可以使用visibility classes：

来实现

<div class="show-for-medium-up">
    <a href="#" class="button large alert">Button 1 </a>
    <a href="#" class="button large ">Button 2</a>
</div>
<div class="hide-for-medium-up">
    <a href="#" class="button tiny  alert">Button 1 </a>
    <a href="#" class="button tiny ">Button 2</a>
</div>

http://jsfiddle.net/Ltamvrc7/

基金会开发者在他们的网站上使用了这种技术。