Использование относительных размеров с блоками rem в Sapper - PullRequest
Новая
       25

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

3 голосов
/ 25 июня 2019

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

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

HTML (компонент Svelte) 

<h1>Title</h1>

CSS (компонента Svelte) 

h1 {
  font-size: 2rem;
}

Глобальный CSS Сапера 

body {
  font-size: 12 px;
}

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

Я ожидаю, что локальный компонент CSS способен считывать размер шрифта для глобального элемента body и, следовательно, корректировать размер шрифта в h1 в соответствии с размером области просмотра. Однако никаких действий не видно. Напротив, использование em единиц отлично работает.

1 Ответ

2 голосов
/ 25 июня 2019

Чтобы 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>
...