CSS увеличение отступа от размера шрифта нелинейного - PullRequest
Новая
       21

CSS увеличение отступа от размера шрифта нелинейного

0 голосов
/ 23 марта 2020

У меня есть элемент, который имеет padding на основе font-size с использованием единицы em. Но мне нужно увеличивать отступ на 5px каждый раз, когда font-size увеличение на 1px. Я даже не уверен, возможно ли это с помощью функции calc() или другим способом? 

.test {
  font-size: 16px;
  padding: 1.875em;
  border: 1px solid red;
}

@media (min-width: 300px) {
  .test {
    font-size: 17px;
  }
}

@media (min-width: 600px) {
  .test {
    font-size: 18px;
  }
}
<div class="test">
  <span>Lorem Ipsum</span>
</div>

Моя цель не в том, чтобы писать media-queries внутри элемента / компонента, это должно зависеть только от размера шрифта его родителя.

1 Ответ

2 голосов
/ 23 марта 2020

Если ваш размер шрифта и, следовательно, 1em увеличивается на 1px, а отступ должен увеличиться на 5px для каждого пикселя с размером шрифта выше 16px, отступ должен быть calc(1.875 * 16px + ((1em - 16px) * 5)) - исходный отступ в 16px (1.875 * 16px) плюс разница размера шрифта в 16 пикселей в 5 раз.

...