在Foundation 6中增加手机的字体大小

问题描述

我无法使以下SCSS增加mobiles和tablets上的font-size:

 // Mobile

@include breakpoint(medium down) {
    $global-font-size: 200%;
}
 

添加上面的代码后，生成的CSS文件甚至都没有更改.

解决方案

很遗憾，无法在媒体查询中定义SASS变量.有关更详细的描述，请参见已解决的问题(以Foundation为例). /p>

尽管如此，您也可以做类似的事情:

%screen-font {
    font-size: 100%;

    @media #{$medium-down} {
        font-size: 200% !important;
    }
}

html {
    @extend %screen-font;
}

I'm unable to make the following SCSS increase the font-size on mobiles and tablets:

// Mobile

@include breakpoint(medium down) {
    $global-font-size: 200%;
}

The generated CSS files isn't even changed after adding the code above.

解决方案

Unfortunately it's not possible to define a SASS variable inside a media query. See this Closed issue for a more detailed description (has Foundation as an example).

You can do a similar kind of thing like this though:

%screen-font {
    font-size: 100%;

    @media #{$medium-down} {
        font-size: 200% !important;
    }
}

html {
    @extend %screen-font;
}

这篇关于在Foundation 6中增加手机的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！