HTML и CSS em/пиксели

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

Я знаю, что в размере шрифта вы должны сделать размер пикселя, который вы хотите разделить на размер шрифта по умолчанию (в большинстве случаев 16 пикселей), но как насчет границ и отступов, где не обязательно значение по умолчанию?

Ваше здоровье


html css pixel em
person scottdavidwalker    schedule 29.12.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Вы просто все еще используете размер шрифта. Пример:

body {
  font-size: 10px;
}

div {
  border-width: 2em;
}

В этом случае div имеет border-width из 20px. font-size элемента также влияет на другие измерения:

div {
  font-size: 12px;
  border-width: 2em;
}

Теперь div имеет border-width из 24px, несмотря на другой размер шрифта body.

person Boldewyn    schedule 29.12.2015
comment
Не забывайте о rem! Во втором примере вы можете указать размер шрифта body, используя rem. - person hopkins-matt; 29.12.2015
comment
Действительно полезно, спасибо :-) - person scottdavidwalker; 29.12.2015

arrow_upward
1
arrow_downward

Вы можете использовать медиа-запрос для адаптивного дизайна.

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
font-size:1em;
border-width: 2em;
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 760px) {
/* STYLES GO HERE */
font-size:1.2em;
border-width: 3em;
}
person erarat    schedule 29.12.2015

arrow_upward
1
arrow_downward

Em наследует и масштабируется относительно своего родителя. Вот статья, в которой это подробно объясняется: https://j.eremy.net/confused-about-rem-and-em/

Вот очень похожий вопрос, который может пролить больше света на расчеты em: Как рассчитывается em?< /а>

person Boris    schedule 29.12.2015