Question

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

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

HTML（苗条的组件）

<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单位效果很好。

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单位一起使用

1 个答案: