Я изучаю 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 в любом случае.
Это кажется настолько простым в концепции, что я чувствую, что ответ смотрит мне в лицо, но я бьюсь головой об это уже некоторое время и нигде не могу найти ответ.
Пожалуйста, помогите! Если кто-то скажет мне, что этого нельзя сделать и что можно использовать пиксельные значения, я с радостью поверю!
Теперь может быть очевидно, в чем заключается мой вопрос... Есть ли лучший способ использовать относительные размеры шрифтов (или любые относительные размеры - такие как ширина, высота и т.д. - если на то пошло) без влияния родительского элемента на дочерние элементы?