Изменение размера шрифта CSS изменяет другие параметры -em?

Я пытаюсь использовать em-units вместо px в дизайне, чтобы он хорошо масштабировался по экрану/устройству/и т. Д.Изменение размера шрифта CSS изменяет другие параметры -em?

То, что я вижу, это то, что при определении не-шрифтовых вещей, таких как «margin "или" padding "в терминах em-единиц, тогда, когда я изменяю размер шрифта внутри одного и того же элемента, он изменяет элементы без шрифта. Например:

header { 
    font-size: 1em; # is default 
    margin: 1em;  # will be 16pt 
}

против

div { 
    font-size: 2.5em; 
    margin: 1em;  # is now 40pt? 
}

Так мои вопросы:

Допускаются вести себя таким образом, для элементов без шрифтовых -Em единицы? (Я так полагаю, но просто проверяю ...)?
И если нет -em, то какой гибкий модуль я должен использовать для таких вещей, как позиционирование элементов?

Если это помогает, я создал jsfiddle, чтобы проверить эти вещи: https://jsfiddle.net/0emnypou/

EDIT: Похоже, это может быть почти дубликат: CSS "em" issue: avoid scalling to font-size of specific element

источник

2016-03-17 Greg Kennedy

Что касается первого вопроса: Да, em единиц (почти) всегда соответствуют размеру текущего элемента, независимо от того, какое свойство вы его используете.

Для последовательного «значение», вы могли бы использовать rem с, что означает «корень эм», и это значение всегда будет такой же, как font-size, который установлен на вашем html.

Вы можете также использовать vw и vh, что означает «ширина окна» и «высота окна»

эм - По отношению к размеру шрифта элемента (2em означает в 2 раза размер самого текущий шрифт)

бэр - Относительно размера шрифта корневого элемента

оч.сл. - по сравнению с 1% от ширины окна просмотра

В.Х. - По сравнению с 1% от высоты окна просмотра

Vmin - По сравнению с 1% меньшего размера окна просмотра

Vmax - По сравнению с 1% большего размера окна просмотра

http://www.w3schools.com/cssref/css_units.asp

источник

2016-03-17 17:35:40 P3t3r6

'1rem' - это размер шрифта, установленный на' html'. Установка только размера шрифта 'body' не изменит размер' rem'. О, и просто быть педантичным: нет, 'em' единиц не будет _allways_ соответствовать размеру текущего элемента. Есть свойства, которых у них нет. –

Спасибо за указание. Я не знал об этой последней части ... В каких случаях это происходит? – P3t3r6

Я имел в виду, что для свойств шрифта 'font' и' font-size' используется размер шрифта родителя, чем размер шрифта текущего элемента. Извините, если это вас смутило. –

Да, Эмс зависят от размер шрифта независимо от того, с каким элементом они используются. 'em' привязан к ширине заглавной буквы M.

'rem' С другой стороны, это «корень М», что означает, что размер относится к первому объявлению размера шрифта. бры особенно полезны для описываемой вами ситуации.

источник

2016-03-17 17:34:32 Quotidian

Я бы предложил установить базовый размер шрифта, скажем, и затем использовать блок rem (всегда ссылается на базовый шрифт). Я пошел к вашему jsfiddle и внес эти изменения, и, похоже, он работает (только измененный размер).

`**body {font-size: 14pt;}** 
header, article, footer { 
    border: 1px solid; 
    margin: **1rem**; 
} 

header { 
    font-size: 2.5em; 
    background-color: DarkTurquoise; 
} 

article { 
    background-color: LightCyan; 
} 

footer { 
    font-size: **0.5rem**; 
    background-color: DarkTurquoise; 
}`

источник

2016-03-17 17:42:08

Изменение размера шрифта CSS изменяет другие параметры -em?

ответ

Смежные вопросы