Question

我是基金会6的新手。当视口为中等或更小时，我希望将网页上的标题文字缩小。

我理解要进行媒体查询，它的css位于app.scss文件中，就在@import部分的下方。我的代码遵循Foundation 6中媒体查询的新方法，如下所示：

.head {
  @include breakpoint(medium down) {
     font-size: 2rem; 
     }
}

然而，在我保存我的页面和app.scss文件然后刷新浏览器之后，当我缩小页面时没有任何变化。有人可以帮忙吗？

谢谢，史蒂夫

Answer 1

我做了自己的mixins，这样你就可以无限制地修补这些小修补。你应该试一试。

//Breakpoints *include
@mixin bp-xl {
  @media only screen and (min-width: 1400px){
    @content;
  }
}
@mixin bp-l {
  @media only screen and (min-width: 1024px){
    @content;
  }
}
@mixin bp-m {
  @media only screen and (min-width: 800px) {
    @content;
  }
}
@mixin bp-s {
  @media only screen and (min-width: 450px) {
    @content;
  }
}
@mixin bp-xs {
  @media only screen and (min-width: 320px) {
    @content;
  }
}

然后你所做的就是：

p {
font-size: 18px;
@include bp-s{font-size:22px;};

@include bp-m{font-size:24px;};

@include bp-xl{font-size:32px;};
}

¡您也可以根据需要创建尽可能多的规则！
希望你喜欢它：D

将媒体查询放置在Foundation 6中的app.scss文件中无效

1 个答案: