Использование относительных размеров с единицами rem в Sapper

Я использую Sapper для создания веб-приложения и хочу использовать относительные размеры шрифта.

Я установил фиксированные размеры шрифта для различных медиа-запросов в элементе body. Затем я хочу использовать rem единиц для font-size в последующих текстовых элементах компонентов Svelte, чтобы настроить размер шрифта для области просмотра.

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 единиц работает нормально.


css svelte sapper
person Matthias Stahl    schedule 25.06.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы 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>
person Tholle    schedule 25.06.2019
comment
Отлично, это html, который я должен стилизовать, а не body, это была ошибка. Он действительно работает без :global, когда я включаю его в global.css Sapper. Спасибо! - person Matthias Stahl; 25.06.2019