Составные относительные размеры шрифта: чистый способ принять размер шрифта дочернего элемента, а не родительского элемента

Question

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

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

Для тех, кто знаком с МЕНЬШЕ , я использую это и подумал, что должен быть в состоянии использовать это, чтобы сделать вычисления для меня, например.использование аксессоров:

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

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

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

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

Answer 1

То, что вы хотите, может быть достигнуто с помощью rem единиц.

rem с являются относительными em с, которые основывают свои вычисления на размере шрифта, объявленном в элементе body.

Сложные проблемы просто исчезают.

http://snook.ca/archives/html_and_css/font-size-with-rem - отличная статья, чтобы сформулировать это.

примечание: IE8 требует px отступления,но это не будет проблемой, поскольку вы уже используете препроцессор.

РЕДАКТИРОВАТЬ: я написал микшин Sass, который выводит rem s с соответствующими px откатами для большинства CSSсвойства: https://gist.github.com/larrybotha/4153104

Answer 2

Я отвечу так же, как и на мой вопрос, использую пиксели!

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

Раньше было так, чторазмер шрифта, объявленный в пикселях, не будет изменяться в IE, что для некоторых является очень раздражающим, и не очень доступным, если пользователь намеренно выбирает просмотр с более низким разрешением, например, по соображениям зрения - вот откуда взялись слова «em'ы лучше всего подходят для шрифтов», но это никогда не было правдой. IE может быть сорван с использованием процентов вместо этого, что затем предлагает те же проблемы;) .. Я помню, как раздражался, когда причуды были для "маленького текста", но потом были радости от открытия CTRL + в не-то есть ..в любом случае, теперь шрифты размером в пиксель будут отлично масштабироваться, если вы создаете плавный сайт, вы можете создать его из смеси em для ширины и пикселей для размера шрифта - если он выглядит нормально при вашем разрешении, попробуйте увеличить его, как вверх, так и вверхи вниз - вы должны пройти довольно далеко вверх или вниз, прежде чем он станет нелегальными кто его масштабирует так далеко вверх, кроме дизайнеров;)

Answer 3

Рассматривали ли вы добавление класса к заголовкам в ячейках таблицы?Я думаю, что дополнительный уровень специфичности перекрыл бы эффект каскадных стилей, составляющих друг друга.