Обнаружить соответствующие размер шрифта и ширину блока

Question

При планировании макетов стилей и изменяемых по размеру текстовых веб-страницах вы должны всегда иметь в виду соответствующий размер шрифта (для блоков em) и содержать ширину блока (в процентах) существующих стилизованных элементов , Это свободное время, чтобы всегда быть в курсе, что это ширина родительского элемента, или если вы изменили размер шрифта для текущего элемента или одного из его предков.

С помощью динамических таблиц стилей (например, Sass или Less) легко реализовать микшины или функции, которые заботятся о математике за вычислениями em и процентов (простые деления), поэтому вы можете написать размер в пикселях и забыть о переводе, но в любом случае вам необходимо предоставить соответствующий размер шрифта и ширину блокирующего блока, поскольку, насколько мне известно, нет возможности автоматически обмануть их.

Знаете ли вы, есть ли какой-либо класс утилиты для автоматизации этого? Сделаны ли какие-то усилия для достижения этого в некотором роде?

Answer 1

Вы не можете использовать рассчитанные значения свойств родителя для установки свойств дочернего элемента в CSS. LESS или SASS не меняют этого. Но размеры могут быть установлены относительно их родителя (или корня при использовании единиц rem).

>No, I'm talking about styling any vertical space (line-height, padding-top, padding->bottom) in em units (so relative to relevant font size) 

Соответствующий размер шрифта - это установленный размер шрифта родителя. Когда вы определяете размер шрифта дочернего элемента как 0.5em, его размер шрифта будет на 50% меньше размера шрифта его родителя.

Вы можете использовать Less/SASS, чтобы объявить, например, 0.5em как переменную. Это позволяет вам изменять и редактировать его в одном месте.

менее

@basefont: 1em; 
@smallfont: 0.5em; 

section { 
font-size: @basefont; 
article { 
font-size: @smallfont; // or @basefont/2; 
} 
} 

footer { 
font-size: @smallfont; 
} 

и любое горизонтальное пространство (ширина, pagging-влево, обивка-направо) в единицах процента (так по отношению к> ширины содержащего блока).

Процентные единицы уже относятся к родительскому (содержащему блок).