gpt4 book ai didi

css - Zurb 基金会 : How do you make buttons smaller on resize to a smaller screen?

转载 作者:技术小花猫 更新时间:2023-10-29 11:20:05 28 4
gpt4 key购买 nike

在 Zurb Foundation 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-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>

这可以应用于 Official Zurb Foundation Documentation 中描述的任何其他 Sass mixins。 .查看媒体查询并滚动到“按钮”页面的底部。

关于css - Zurb 基金会 : How do you make buttons smaller on resize to a smaller screen?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19015849/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com