3

我正在使用 Sapper 创建一个 Web 应用程序并希望使用相对字体大小。

我为body元素上的不同媒体查询设置了固定的字体大小。然后我想在 Svelte 组件的后续文本元素中使用rem单位font-size来调整视口的字体大小。

HTML（Svelte 组件）

<h1>Title</h1>

CSS（Svelte 组件的）

h1 {
  font-size: 2rem;
}

Sapper 的全局 CSS

body {
  font-size: 12 px;
}

@media (min-width: 600px ) {
  body {
    font-size: 15px;
  }
}

我希望本地组件 CSS 能够读取全局body元素上的字体大小，因此将字体大小调整h1为视口大小。但是，没有看到任何动作。相反，使用em单位效果很好。

4

1 回答 1

2

为了让 Svelte 不删除未使用的 CSS 选择器，您可以使用:global修饰符。

要更改值使用的字体大小，rem您应该设置样式html，而不是body.

示例（REPL）

<h1>Hello!</h1>

<style>
  :global(html) {
    font-size: 12px;
  }

  @media (min-width: 600px) {
    :global(html) {
      font-size: 15px;
    }
  }

  h1 {
    font-size: 2rem;
  }
</style>
于 2019-06-25T14:14:04.143 回答