在 Sapper 中使用相对大小和 rem 单位

Question

我正在使用 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 单位效果很好。

Answer 1

为了让 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>