Определить соответствующий размер шрифта и ширину блока - PullRequest
Новая
       11

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

0 голосов
/ 14 октября 2011

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

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

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

1 Ответ

1 голос
/ 22 октября 2014

Вы не можете использовать вычисленные значения свойств родителя, чтобы установить свойства потомка в CSS.Меньше или 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;
}

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

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

...