Zurb Foundation 5 - 使按钮响应

Question

在 Zurb Foundation 5 - 当浏览器被调整为更小或在更小的屏幕上时，如何响应地切换到更小的按钮样式？

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

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

但我希望按钮在调整到更小的屏幕时看起来更像这样 ($button-sml)：

任何帮助将不胜感激！

---

我根据上面类似问题链接的正确答案想出了一个 sass/scss mixin。只需将以下 mixin 添加到您的“app.scss”文件中：

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

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