Подтвердить что ты не робот

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

Я изучаю CSS и читаю вопросы о размерах шрифта Relative vs Absolute на 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 больше не поддерживает аксессуры.

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

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


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

4b9b3361

Ответ 1

Короткий ответ - нет, это не то, как работает CSS.

Более длинный ответ. CSS, как вы знаете, означает Каскадные таблицы стилей. Часть этого каскада состоит в том, что дочерние элементы наследуют свойства своих родительских элементов.

Методика, которую я видел, как многие люди используют (в том числе Дан Сидерхольм в своей книге Bulletproof CSS, которую я рекомендую), сделать базовый шрифт размер, эквивалентный 10px, вместо того, чтобы иметь дело с типовым стандартным размером шрифта 16px. Я не знаю, насколько это поможет вашему примеру, но это, скорее всего, поможет работать с em-based шрифтами в целом.

Я также нашел эту статью о различиях между размерами шрифтов на основе процентов и em. Это немного старо, но сравнение между процентами и em все еще актуально.

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

Кроме того, как сказал @JukkaK.Korpela, таблицы обычно не содержат заголовков тегов, что означает <th> и <thead> элементы для.

Ответ 2

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

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

Ответ 3

Вставка 2 - это ровно 1.2em, но это не обязательно 1.2 rem.

rem почти так же, как em, но он является частью css3, и это... (из документов)

Равно вычисленному значению 'font-size на корневом элементе.

Если указано значение свойства font-size корневого элемента, 'Rem единицы относятся к исходному значению свойства.

Ответ 4

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

Например, для вашего кода, о котором идет речь, для каждой части текста оберните его пробелом, а затем установите размер шрифта на промежутках. Поскольку эти промежутки не вложены, все размеры шрифта относятся к box1, вот результат https://jsfiddle.net/davenkin/pLype465/:

<div id="box1">
<span id="span1">test text sample1</span>
<div id="box2">
    <span id="span2">test text sample2</span>
    <div id="box3">
        <span id="span3">test text sample3</span>
        <div id="box4">
            <span id="span4">test text sample4</span>
        </div>
    </div>
</div>