在Zurb Foundation 5中-当将浏览器调整为较小尺寸或在较小屏幕上时,如何响应地切换为较小的按钮样式?
在 此处 对StackOverFlow提出了类似的问题并得到了回答,但是正确的解决方案不适用于Foundation 5,猜测它只能在Foundation 4中起作用。
当前将按钮调整为较小的屏幕时,其外观如下所示($ 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);
}
}
您可以通过可见性类实现它:
<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>
基金会开发人员在他们的网站上使用了此技术。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句