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

Question

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

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

HTML（Svelte组件）

<h1>Title</h1>

Svelte 组件中的 CSS

h1 {
  font-size: 2rem;
}

Sapper的全局CSS

body {
  font-size: 12 px;
}

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

我希望本地组件CSS能够读取全局 body 元素上的字体大小，并因此调整 h1 中的字体大小以适应视口大小。然而，没有任何动作。相比之下，使用 em 单位可以正常工作。

- Matthias Stahl

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>

- Tholle

---

太好了，我需要样式化的是 html 而不是 body，这就是 bug。当我将其包含在 Sapper 的 global.css 中时，它实际上可以正常工作，而无需使用 :global。谢谢！ - Matthias Stahl