Медиа-запросы PX против EM vs REM

Может кто-нибудь объяснить, почему мои медиа-запросы ломаются при преобразовании их FROM px TO ems

В теле моего документа я включил следующее правило font-size: 62,5%. Поэтому я бы предположил, что я могу преобразовать медиа-запрос в формат от 650px до 65em? Изменение моих медиа-запросов на ems разбивает макет

В качестве альтернативы можно ли преобразовать медиа-запрос в REMS с резервным пикселом? что я не знаю, как это сделать

@media screen and (min-width: 650px) { 

body 
{
font-size: 62%;
background-color: #364759;
background-repeat: repeat-x;
background: url("bg.gif");
}

#wrapper, 
footer
{
width: 80%;
max-width: 1050px;
margin: 0 auto;
}
} // end media query

большое спасибо, P

ОТВЕТЫ

Ответ 1

В разделе 1.3 спецификации медиа-запросов говорится:

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

Аналогично, раздел говорит:

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

Итак, ваше правило font-size: 62.5% не влияет на запросы к мультимедиа, а 1em по-прежнему 16px, а не 10px.

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

body { font-size: 10000px; }
@media (min-width: 1em) {
  body { font-size: 1px; }
}

1em будет гигантским, поэтому медиа-запрос будет соответствовать, поэтому 1em будет небольшим, поэтому медиа-запрос не будет соответствовать, поэтому 1em будет гигантским, поэтому...

Ответ 2

Вот отличная статья, которая поможет объяснить различия между px/em/rem

https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/

Также это может быть полезно: https://css-tricks.com/rems-ems/

ИЗМЕНИТЬ

Как @Jesse Kernaghan прокомментировал, что приведенные выше ссылки могут быть легко разбиты, я опишу. Различия между PX и EM против REM.

точек

Пиксель является абсолютным измерением, что означает, что они имеют одинаковый размер независимо от размера всего остального. На практике они не имеют одинаковой длины везде, потому что определенные устройства обрабатывают их по-разному, однако на каждом устройстве пиксель всегда один и тот же. 16px на вашем мониторе ноутбука не совпадает с 16px на вашем iPad. Пиксели являются абсолютными, но не согласованными.

ет

Где px - абсолютная мера длины em, относятся к размеру шрифта родительского элемента. Возьмем следующий пример:

div{ font-size: 22px; }
p{ width: 200em; margin: 3em; font-size: 0.8em;}

<div>
    <p>Some text</p>
</div>

Теперь, если вы хотите половину размера элемента p, вам просто нужно изменить размер шрифта окружающего <div> на 11px.

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

Однако существуют проблемы с em. Поскольку все имеет размер относительно родителя, значение em изменяется, поскольку элементы вложены. Если вы возьмете приведенный выше пример и развернете его и вставьте <blockquote> внутри <p> с font-size из 0.5em, результат, вероятно, не будет тем, что ожидается. Результатом будет то, что font-size of <p> будет равно 11px, однако font-size of <blockquote> снова будет наполовину этого, потому что em относится к непосредственному предку (<p>), а не <div>.

бэр

Rems (root ems) похожи на em, но они всегда относятся к элементу font-size элемента <html>. Не имеет значения, насколько глубоко вложен элемент.

Заключение

Итак, с кратким объяснением из того, что существует основная концепция, которую Крис Койер имеет в своем post https://css-tricks.com/rems-ems/. В основном это позволяет установить базовый размер шрифта html, а затем корректировать медиа-запрос, используя px (помните, что это абсолютное измерение). И внутри этих медиарешений размер изменяется, только вы уменьшаете размер шрифта. Затем вы устанавливаете основные элементы с помощью rem, а элементы, которые необходимо масштабировать, с основными элементами используют em. Ниже приведен пример кода Криса Койе:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

Ответ 3

В дополнение к другим ответам обратите внимание, что длина, указанная в em для другого свойства, чем font-size, фактически относится к font-size самого элемента, то есть не обязательно его родителя. Это имеет значение, если вы укажете отступ, маржу и т.д. В em, а также font-size для одного и того же элемента.