Относительные размеры шрифта для дочерних элементов?

Я изучаю CSS и читал вопросы об относительных и абсолютных размерах шрифтов на StackOverflow. Я наткнулся на две темы.


1. В одной теме (CSS font size: relative vs. absolute values. Which to use?) один из ответов на самом деле является вопросом, на который не было ответа: [QUOTE]

Вопрос, многие здесь говорят, что Pt - это только для печати. Но разве не приятно иметь простую возможность быстро сделать текст нужного размера, не запоминая, какой DIV имеет какое значение Em или %. Например, когда у вас есть:


 
test text sample1
test text sample2
test text sample3
test text sample4

Я знаю, что это довольно странная структура, но, допустим, макету нужна такая структура для графических целей и наслоения изображений CSS. Итак, я хочу сделать шрифт box1 = 100%, box2 = 1.2em. box3 = .8em, и box4 = 1.6em

Теперь, проблема в том, что Em из box 1 также передается всем его дочерним элементам, поправьте меня, если я ошибаюсь, так что это означает, что box2 не точно 1.2em, и к тому времени, когда мы доберемся до размера шрифта box 4, будет очень трудно сказать, что это такое. В то время как при использовании Pt или Px он остается таким, каким мы хотим его видеть.

Однако размеры Px негибки, и мне нравится делать шрифты крупнее в меню браузера, когда я сижу далеко от экрана. Скажем прямо, это удобно. Так что размер Px отпадает. Так почему бы не использовать Pt? Насколько велика разница в браузере?


2. В другой теме есть тот же вопрос (Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element) с цифрами, расчетами - - более толковый, без должного ответа:

Например, если у меня есть:

td { font-size: 1.3em }

h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }

и у меня есть заголовки/параграфы внутри ячеек таблицы, я знаю, что я могу избежать соединения размеров шрифтов следующим образом:

td h2, td h3, td p { font-size: 1em }

что приведет к тому, что заголовки/параграфы в моих ячейках таблицы будут иметь font-size 1. 3em (как у td).

Но я ищу хороший, чистый способ, чтобы каждый дочерний элемент имел свой оригинальный размер шрифта, а не родительский.

Я бы очень хотел избежать следующих действий (и, конечно, я хотел бы избежать использования px):

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

Для тех, кто знаком с LESS, я использую его и подумал, что я должен быть в состоянии использовать его, чтобы сделать вычисления за меня, например, используя accessors:

td h2 { font-size: h2['font-size'] / td['font-size'] }

Это, по крайней мере, будет использовать оригинальные значения для вычисления, но кажется таким же неуклюжим, как и выше, и кроме того, кажется, LESS больше не поддерживает accessors в любом случае.

Это кажется настолько простым в концепции, что я чувствую, что ответ смотрит мне в лицо, но я бьюсь головой об это уже некоторое время и нигде не могу найти ответ.

Пожалуйста, помогите! Если кто-то скажет мне, что этого нельзя сделать и что можно использовать пиксельные значения, я с радостью поверю!


Теперь может быть очевидно, в чем заключается мой вопрос... Есть ли лучший способ использовать относительные размеры шрифтов (или любые относительные размеры - такие как ширина, высота и т.д. - если на то пошло) без влияния родительского элемента на дочерние элементы?

10
задан Machavity 10 September 2019 в 14:06
поделиться