медиазапросы PX против EM против REM

Может кто-нибудь объяснить, почему мои медиа-запросы ломаются при преобразовании их из рх в Эмсмедиазапросы PX против EM против REM

В теле моего документа, я включил следующее правило размер шрифта: 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

источник

2015-04-16 stckpete

Проблема в том, что медиа-запросы не получают свой «базовый размер» из тела, а скорее настройки UA или user pref. Изменение размера шрифта тела не влияет на размер шрифта медиа-запросов. –

Вот большая статья, которая поможет объяснить различия между рх/EM/бэр

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

Кроме того, это может быть полезно: https://css-tricks.com/rems-ems/

EDIT

Как @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 из <p> будет равна 11px однако font-size из <blockquote> будет половина этого снова, потому что em является относительно непосредственного предка (<p>), не <div>.

бэр

Rems (корень СЭМ), подобны em-х, но они всегда по отношению к font-size от <html> элемента. Неважно, насколько глубоко вложен элемент.

Заключение

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

/* 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; 
}

источник

2015-04-16 21:18:13

Ссылки как ответы могут быть легко сломаны, если вы собираетесь ссылаться на внешний ресурс, вы должны попытаться также предоставить соответствующие фрагменты. –

Хорошая точка! Спасибо за предложение.Я сделаю необходимые изменения. –

Спасибо, ребята, некоторые полезные советы, но я все еще смущен, как конвертировать эти px-запросы. Я использовал возвышенный пакет для преобразования px в rems (из наблюдения это просто работает путем деления px/16), и этот DID работает! это было очень странно, потому что мой базовый шрифт установлен на 62,5, поэтому я понятия не имею, как преобразование REM не нарушало макет ... – stckpete

Section 1.3 of the media queries spec говорит:

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

Аналогично, section 2 говорит:

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

Так что ваш font-size: 62.5% правило не имеет никакого эффекта в отношении запросов СМИ, и 1em еще 16px, не 10px.

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

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

1em будет гигантским, поэтому запрос СМИ будет соответствовать, так 1em будет небольшой, поэтому запрос информации не будет матч, так 1em будет гигантским, так что ...

источник

2015-04-18 21:43:06

Я подумал об этом раньше сегодня и просто подумал: * у них, вероятно, есть правило для этого * - я нахожу ответ на этот 6 часов спустя, спасибо! – SidOfc

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

источник

2015-10-10 23:19:30

медиазапросы PX против EM против REM

ответ

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