Zurb基金会：如何使缩小按钮的尺寸缩小到较小的屏幕？ [英] Zurb Foundation: How do you make buttons smaller on resize to a smaller screen?

问题描述

在Zurb Foundation 4中，当浏览器调整大小或小屏幕时，是否有自动切换到较小的按钮样式？

例如屏幕是标准的桌面屏幕执行此操作：

 < a href =＃class =primary button>按钮1< / a> 
  

当屏幕尺寸缩小时，请执行以下操作：

 < a href =＃class =small primary button>按钮1< / a> 
  

我有一个水平排的6个按钮按钮组，并希望使用小按钮类当屏幕尺寸变小时，当屏幕为标准时，介质按钮类是可能的吗？

解决方案

用Sass / Scss mixins和媒体查询完成。在你的app.scss中：

  $ middle-up：only screen and（max-width：＃{$ small-屏幕}）; 
 @media＃{$ small} {
 .responsive-button {
 @include button（$ button-lrg，$ primary-color，0px，false，false，false）; 
} 
} 
 
 @media＃{$ middle-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 =respond-button> Lorem< / a>< / li> 
< li>< a href =class =respond-button> Qui< / a>< / li> 
< li>< a href =class =respond-button> Voluptatibus< / a>< / li> 
< / ul> 
< / div> 
< div class =small-4 large-4 columns> 
< p> Lorem ipsum dolor sit amet。< / p> 
< / div> 
< / div> 
  

这可以应用于。查看媒体查询并滚动到按钮页面的底部。

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>

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?

解决方案

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); 
    }   
}

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>

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屋！