Zurb基金会：你如何按钮上调整大小小到一个较小的屏幕？ [英] Zurb Foundation: How do you make buttons smaller on resize to a smaller screen?

问题描述

在Zurb基金会4，有没有办法自动切换到较小的按钮样式当浏览器大小小或更小的屏幕？

In Zurb Foundation 4, is there a way to automatically switch to the smaller button style when the browser is resized smaller or on a smaller screen?

例如，当屏幕是一个标准的桌面屏幕做到这一点：

For example when the screen is a standard desktop screen do this:

<a href="#" class="primary button">Button 1</a>

在调整屏幕大小更小，这样做：

When the screen is resized smaller, do this:

<a href="#" class="small primary button">Button 1</a>

我在一个水平排按钮组的6个按钮，并想用的小按钮，上课的时候​​屏幕大小更小，当屏幕显示为标准，媒介按钮类这可能吗？

I have a button group of 6 buttons in a horizontal row and would like to use the small button class when the screen is resized smaller and the medium button class when the screen is "standard," is this possible?

推荐答案

这可萨斯/ SCSS混入和媒体查询来实现。在你app.scss：

This can be accomplished with Sass/Scss mixins and media queries. In your 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按钮我们刚刚创建类。下面是一个例子：

Just use the .responsive-button class we just created. Here is an example:

<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基础文档描述的其它的Sass混入的。看看媒体查询并滚动到按钮页面的底部。

This can be applied to any of the other Sass mixins described in the Official Zurb Foundation Documentation. Look at Media Queries and scroll to the bottom of the Buttons page.

这篇关于Zurb基金会：你如何按钮上调整大小小到一个较小的屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！