Я знаю, что em установит font-size относительно родительского. Что делать, если я хотел установить размер шрифта относительно переопределенного значения данного элемента?css - размер шрифта относительно переопределенного значения
Например:
h1 {
font-size: 20px;
}
.smaller h1 {
font-size: (80 percent of the standard h1);
}
Возможно ли это?
Следует отметить, что я использую less, что может обеспечить дополнительную гибкость.
Не уверен насчет EMs, я полагаю, вы могли бы попробовать и посмотреть, что произойдет.
Если вы хотите использовать меньше-х переменных, вы могли бы сделать что-то вроде этого:
@h1-font-size: 20px;
h1 {
font-size: @h1-font-size;
}
.smaller h1 {
font-size: @h1-font-size * .8;
}
Спасибо, cjd, на самом деле так я и сделал, если нет лучшей альтернативы. Это немного утомительно, делая переменную для всех элементов, которые я хотел бы сделать меньше. –
Вы можете определить одну базовую переменную размера шрифта для всех ваших меньших файлов, тогда вы можете просто умножить это, чтобы получить размер шрифта заголовка, чтобы вам не нужно всегда создавать новую переменную. – cjd82187
Вы не можете. Нет никакого способа сделать что-либо относительно «переопределенной ценности». Вы должны разработать свой стиль по-другому.
И было бы довольно странно задавать размер заголовка как фиксированное количество пикселей для некоторых заголовков и относительно относительного «переопределенного значения», которое обычно неизвестно и должно зависеть от браузера.
Но если вы ожидаете, что браузеры будут иметь общие значения по умолчанию, вы можете в значительной степени использовать HTML5 “expected rendering” rules, так как они хорошо отражают обычную браузерную практику. По их словам, h1 имеет font-size: 2.00em, поэтому, если вы хотите установить размер до 80%, просто используйте 1.6em.
'em' не работает с каскадом, поэтому вы не можете сделать это с помощью значения' em'. – BoltClock
Правильно, вот в чем вопрос. –
Нет никакого способа сделать это с помощью чистого CSS. – cimmanon