Я изучаю CSS и читаю вопросы об Относительных и Абсолютных размерах шрифтов в StackOverflow. Я наткнулся на две темы.
1. В одной теме ( Размер шрифта CSS: относительные и абсолютные значения. Что использовать? ), один из ответов на самом деле является вопросом, на который не был дан ответ: [QUOTE]
Вопрос, многие здесь говорят, что Pt предназначены только для печати. Но разве не приятно иметь простую возможность быстро сделать желаемый размер текста, не помня, какой DIV имеет значение Em или%. Например, когда у вас есть:
<body>
<div id="box1">
test text sample1
<div id="box2">
test text sample2
<div id="box3">
test text sample3
<div id="box4">
test text sample4
</div>
</div>
</div>
</div>
Я знаю, что это какая-то странная структура, но, скажем, макету нужна такая структура для графических целей и наслоения изображений CSS. Поэтому я хотел бы сделать box1 font = 100%, box2 = 1.2em. box3 = .8em и box4 = 1.6em
Теперь проблема в том, что Em из коробки 1 также передает всем своим дочерним элементам, поправьте меня, если я ошибаюсь, так что это означает, что box2 не точно 1.2em, и к тому времени, когда мы доберемся до размера шрифта в коробке 4 это действительно трудно сказать, что это такое. Принимая во внимание, что когда мы используем Pt или Px, он остается таким, каким мы хотим, чтобы он оставался.
Однако размеры Px негибкие, и мне нравится увеличивать шрифты в меню моего браузера, когда я сижу далеко от экрана. Посмотрим правде в глаза, это удобно. Так что размер Px отсутствует. Так почему бы не использовать Pt? Насколько велика разница в браузере?
2. Другой поток имеет тот же вопрос ( Сложные относительные размеры шрифта: чистый способ принять размер шрифта дочернего элемента, а не родительского элемента ) с числами, вычисления - - более объяснительно, без правильного ответа :
Например, если у меня есть:
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 }
, что привело бы к тому, что заголовки / абзацы в ячейках моей таблицы имели размер шрифта 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, я использую это и думаю, что я должен быть в состоянии использовать это, чтобы сделать вычисления для меня, например. используя аксессоры:
td h2 { font-size: h2['font-size'] / td['font-size'] }
Это, по крайней мере, будет использовать исходные значения для выполнения расчетов, но выглядит так же неуклюже, как и выше, и, кроме того, кажется, что LESS больше не поддерживает методы доступа.
Это кажется таким простым в концепции, я чувствую, что ответ смотрит мне в лицо, но я некоторое время бился головой об этом и нигде не могу найти ответ.
Пожалуйста, помогите! На данный момент, если кто-то скажет мне, что это не может быть сделано, и что все в порядке, чтобы использовать пиксельные значения, я с радостью поверю им!
Теперь может быть очевидно, какой у меня вопрос ... Есть ли лучший способ использовать относительные размеры шрифта (или любой относительный размер - например, ширину, высоту и т. Д.) Без дочернего элемента? элементы, на которые воздействует родительский элемент?