ZURB Foundation 5 仅针对小屏幕更改 h1、h2、p 字体大小

Question

我正在使用 Foundation 5.4 构建一个响应式网站，但我遇到了一个问题。我根本不知道 SASS，所以我通过直接更改 foundation.css 文件对颜色和网络字体进行所有更改。

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

我知道您可以使用 Ruby 或 SASS 轻松完成这些操作，但我还没有学过这些。任何学习这两个的好材料都值得赞赏。

Answer 1

CSS 方式::

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

萨斯之道:::

在您的 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} { }