Переменные в медиа-запросе - PullRequest
Новая
       28

Переменные в медиа-запросе

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

Я пытаюсь установить переменную css для другой переменной css в медиа-запросе. Но я не вижу изменений, я бы подумал. Если я смотрю в инструментах разработчика Chrome, он использует переменную --ratio-alt. Но результат на экране выглядит больше, так как он просто показывает шрифты на 100%.

Я пытался изменить порядок медиазапроса, но безуспешно. 

:root {
    --font-size: 100%;
    --ratio: 1.333;
    --ratio-alt: 1.68;

    --h4: calc(var(--font-size) * var(--ratio));
    --h3: calc(var(--h4) * var(--ratio));
    --h2: calc(var(--h3) * var(--ratio));
    --h1: calc(var(--h2) * var(--ratio));
}

@media (min-width: 40em) {
    :root {
      --ratio: --ratio-alt;
    }
}

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

1 Ответ

1 голос
/ 03 июня 2019

Вы забыли обернуть --ratio-alt в var() при назначении --ratio внутри запроса @media: 

:root {
  --font-size: 100%;
  --ratio: 1.333;
  --ratio-alt: 1.68;
  --h4: calc(var(--font-size) * var(--ratio));
  --h3: calc(var(--h4) * var(--ratio));
  --h2: calc(var(--h3) * var(--ratio));
  --h1: calc(var(--h2) * var(--ratio));
}

@media (min-width: 40em) {
  :root {
    --ratio: var(--ratio-alt);
  }
}
...