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

Question

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

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

我知道您可以使用 Ruby 或 SASS 轻松完成这些操作，但我还没有学会这些。也感谢任何学习这两个的好东西 material。

Answer 1

CSS 方式::

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

SASS 方式::

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

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

ZURB Foundation 5 change h1, h2, p font-size for small screens only

css

responsive-design

zurb-foundation