ZURB Foundation 5仅为小屏幕更改h1，h2，p font-size

Question

我正在建立一个基金会5.4的响应式网站，但我有一个问题。我根本不了解SASS，因此我通过直接更改foundation.css文件来改变颜色和网络字体。

目前该网站有点先进，但我遇到了font-size的问题。我想更改p，h1，h2和h3的属性，但仅适用于小屏幕，因为我认为它们在手机上看起来太大了。只有我不知道我应该在哪里包含这些属性，或者要遵循哪种媒体查询结构。

我知道你可以用Ruby或SASS轻松完成这些，但我还没有学到这些。此外，任何学习这两个的好材料都是值得赞赏的。

Answer 1

CSS WAY ::

@media only screen and (max-width: 40em) { /*your styles*/}

THE SASS WAY :::

在你的settings.scss文件中，在较小的屏幕上有一个缩小字体大小的区域。

看起来像这样::

// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(20) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

同样在Foundation中，您可以像以下一样为小屏幕创建自定义媒体查询:::

@media #{$small-only} { }