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

Question

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

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

HTML（Svelte 组件）

<h1>Title</h1>

CSS（属于 Svelte 组件）

h1 {
  font-size: 2rem;
}

全球 CSS 的 Sapper

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>

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

Using relative sizes with rem units in Sapper

css

svelte

sapper