Сбросьте rem или font-size только для всех элементов внутри определенного div - PullRequest
Новая
       20

Сбросьте rem или font-size только для всех элементов внутри определенного div

0 голосов
/ 08 января 2019

У меня типичная структура HTML, как показано в коде ниже. 

<div class="common-parent">
  <div class="parent>
    <div class="child">
      <h2>Child 1</h2>
      <span>Some text here...</span>
    </div>
    <div class="new-child">
      <h2>New Child</h2>
      <div>
        <span>Some text here...</span>
      </div>            
    </div>
  </div>
</div>

Теперь мне нужно изменить размер шрифта или размер rem всех элементов в div.parent, включая самого себя.

Так как размер rem по умолчанию равен 16px, мне нужно уменьшить его до 12px, что составляет 75%. Я не могу изменить его в теге html, так как он повлияет и на все остальные элементы.

Как мне изменить его только для 'div.parent' и всех элементов внутри него, используя SCSS или CSS?

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Просто используйте измерение в пикселях, чтобы «сбросить» базу font-size: 

.common-parent div.parent{
    font-size: 12px;
}

Тогда каждый элемент, содержащийся в .common-parent div.parent, будет читать 1em как 12px.

Примечание: Обычно вам не следует смешивать пиксельные единицы с em с, но для сброса базовых размеров шрифта это оправданное решение.

0 голосов
/ 08 января 2019

Шрифт uint 'rem' означает 'Root EM', и он всегда зависит от корневого элемента <HTML>. Поэтому, если вы хотите, чтобы размер шрифта зависел от настроек размера шрифта определенного родительского элемента, вы можете использовать другие единицы, такие как em или процент.

...