Как отладить srcset и размеры отзывчивых изображений, например, какое условие носителя применяется? - PullRequest
Новая
       12

Как отладить srcset и размеры отзывчивых изображений, например, какое условие носителя применяется?

5 голосов
/ 12 марта 2019

Итак, я снова натягиваю волосы на адаптивные изображения.CMS дает мне srcset, я создаю простой атрибут sizes, Я проверяю currentSrc, наводя курсор на атрибут в Dev Tools - неверный Src!Перейдите к 10, возможно, измените состояние носителя, сохраните, перезагрузите, наведите курсор мыши, повторите, пока все не будет работать.Надеюсь, что это никогда не подведет для других изображений.

Должен быть лучший способ сделать это?Учитывая, что Firefox по-прежнему лучше, чем Chrom * в отладке веб-шрифтов, и что только сегодня я обнаружил Добавить соотношение пикселей устройства в Chrome Dev Tools, мне интересно, что я пропускаю.Я знаю и использовал заполнителей изображения , но их может быть сложно настроить, и они не могут сказать мне

  • Является ли атрибут sizes синтаксически правильным?
  • сколько пикселей устройства браузер считает изображение в текущем окне просмотра?Сколько это "srcset w -pixels"?
  • и самое главное: какое условие мультимедиа соответствует текущему окну просмотра? Почему?

EDIT:Придумали этот пример, надеюсь, он поможет: 

<img
  src="foo.jpg"
  sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
  srcset="foo_a.jpg 300w, foo_b.jpg 768w" />

Область просмотра с разрешением 650 пикселей, соотношение устройств к пикселям 1.
DevTools говорит мне:

currentSrc == "foo_b.jpg"

Почему?Какое это условие?Что означает 33vw?650px*33/100?Как это относится к 300w?Как это ближе к 768w?
Обратите внимание, что я на самом деле не спрашиваю об этих конкретных значениях, а об общем рабочем процессе.

EDIT2: я, вероятно, запрашиваю функцию инструментов Dev (илирасширение), который сказал бы мне, в этом случае:

  1. Область просмотра 650px
  2. соответствует ((min-width: 600px) and (max-width: 1000px))
  3. 650px @ DPR 1.0 = 650w
  4. => 33Вт = 650Вт * 33/100 = 214,5Вт
  5. ближайший источник = foo_a.jpg 300w
  6. НО, у меня foo_b.jpg в кеше
  7. выбор foo_b.jpg

1 Ответ

1 голос
/ 19 марта 2019

является ли синтаксически правильный атрибут размеров?

В вашем случае нет.Внешние парены в ((min-width: 600px) and (max-width: 1000px)) выглядят лишними.

Сколько пикселей устройства браузер считает изображение в текущем окне просмотра?Сколько это «srcset w-пикселей»?

Если вы знаете соотношение пикселей вашего устройства (DPR), вы можете использовать это значение для деления реальной ширины изображения (w значение на srcset)), чтобы получить ширину в пикселях, которая будет занимать изображение на экране.

Браузеры знают об этом из предоставленных вами атрибутов srcset и sizes и учитывают это при решении, какое изображение использовать.

и самое главное: какое условие мультимедиа соответствует текущему окну просмотра?Почему?

Медиа-запросы в атрибуте sizes работают точно так же, как CSS-медиа-запросы.Таким образом, первый допустимый медиазапрос с чтением слева направо будет применен.Забавно, что браузер делает (по крайней мере, Chrome), если один запрос между наборами запятых недействителен, он не сделает недействительным весь атрибут sizes, только этот запрос.

Вы можете проверить это, применив тот же наборМедиа-запросы в CSS, например, так (обратите внимание, я использую Sass): 

body {
   @media (max-width: 599px) {
      &:before { content: "max-width: 599px"; }
   }
   @media (min-width: 600px) and (max-width: 1000px) {
      &:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
   }

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

Мой тестовый пример: https://codepen.io/teodragovic/pen/eXjPoz
Хорошая справочная статья: https://ericportis.com/posts/2014/srcset-sizes/

...