Вопрос по image, em, srcset, responsive-design, html – Как реагирующие изображения работают с `em`, предоставленным как длина в` размеры`?

2

Как браузеры могут понятьem блок при использовании в адаптивном изображении?

<img alt="A giraffe" src="giraffe.jpg"
     srcset="[email protected] 600w, [email protected] 800w, [etc.]"
     sizes="(max-width: 40em) 40em">

Это подтверждает, и я не вижу предупреждений в консолях браузера. Но если весь смысл preloader изображений заключается в том, чтобы получить изображениядо CSS загружается и анализируется, для чего используется браузерem?

Это просто по умолчаниюfont-size что это относится к<html>? Должен ли я использоватьrem для ясности? Есть ли разница между ними, когда пользователь увеличивает масштаб?

Это не теоретически; яс помощьюem в моих точках останова медиа-запросаи некоторые изображения ограничены размером контейнера для оптимальной длины строки (с помощьюem, конечно).

Я проверил спецификации, но это удивительно кратко о новых функциях адаптивного изображения.

Ваш Ответ

2   ответа
0
5.1.1. Относительная длина шрифта: единицы измерения «em», «ex», «ch», «rem»

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

их подразделение

Равно вычисленному значению свойства «font-size» элемента, для которого оно используется.
http://www.w3.org/TR/css3-values/#font-relative-lengths

em Единицы CSS равны размеру шрифта текущего элемента.font-size собственность наследуется. Поэтому элемент (img в этом случае) будет измеряться в 40 разfont-size имущество. Если пользователь увеличивает страницу (что увеличивает размер шрифта),em Обновление устройства до этого изfont-size свойство автоматически.

Базовый размер шрифта будет определяться браузером, если браузер работает на Windows на Mac и пользователь не изменил размер шрифта, тогда базовый размер шрифта будет 16px (обычно). В Linux, BSD или любой другой системе размер шрифта будет установлен средой рабочего стола и может варьироваться.

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

Правильно, но что делает предварительный загрузчик браузера без CSS, чтобы сообщить, чтоem оказывается? Tigt
Есть ли у вас контрольный пример где-нибудь, чтобы проверить вычисленное значение в разных браузерах и настройках размера корневого шрифта? Nicolas Hoizey
О, конечно, я понимаю, как изображение в конечном счете измерено. Но когда браузер preloader должен угадать, насколько большим будет изображение, учитывая толькоsizes атрибут и ни один из CSS, который еще не был обработан в дерево рендеринга, есть специальное значение дляem? Tigt
2

это то, что они должны были сказать:

<Tigt> Простите меня, ребята, у меня был вопрос о том, какem интерпретируется при использовании внутриsizes
<TabAtkins> Tigt: То же, что и в медиазапросах - они относительно начального размера шрифта.
<TabAtkins> (Не размер шрифта в <html>,начальная размер шрифта, установленный персональными настройками пользователя.)

<Wilto> 16px почти везде, пока вы не изменилиfont-size изhtml.
<TabAtkins> Tigt: rem здесь обрабатывается идентично им.

Итак, скорость чтения:

Когда используется вsizes или медиа-запросы,em а такжеrem оба означают "пользовательский по умолчаниюfont-size.Настоящийem или жеrem который управляет тем, как изображение размещается на странице, может измениться, если ваш CSS изменит егоЭто означает, что нужноне изменить размер по умолчаниюem если они хотят предоставить образу предзагрузчика правдивую информацию

W3C Media Queries:

Этот медиазапрос выражает, что таблица стилей может использоваться на экране и портативных устройствах, если ширина области просмотра больше 20em.

 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

Значение «em» относительно начального значения «font-size».

@ Humble.rumble: Ну, кажется, вы не поняли конкретный вопрос. И размер шрифта по умолчанию для Mac и Windows для Safari / Chrome / Firefox и даже IE составляет 16px, если вы не изменили его в своей конфигурации. alexander farkas
@Flimm что-то вродеhtml { font-size: 16px }да (сбраузеры меняют свои значения по умолчанию на 16) Tigt
Что вы подразумеваете под "не следует изменять размер по умолчаниюem"? Вы имеете в виду в настройках браузера или установивhtml { font-size: ... }? Flimm
это грубо для меня, так как я устанавливаюfont-size изhtml в больших размерах окна, чтобы все масштабировать :( raglan

Похожие вопросы