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

[Anonymous]

Итак, я снова нахожу волосы на отзывчивые образы. CMS дает мне свой srcset , я строю атрибут Simples , я проверяю Currentsrc , парят по атрибуту в инструментах Dev-неправильный SRC! Перейдите на 10, измените состояние носителя, может быть, сохранить, перезагрузить, парить, повторить, пока оно не сработает. Надеюсь, это никогда не пройдет для других изображений. < /P>

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


[*] Размеры < /code> атрибут синтаксически правильный? Сколько "srcset w < /code> -pixels" это?

Код: Выделить всё

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

Viewport At 650px, Device-pixel-ratio 1.

devtools говорит мне: < /p>

currentSrc == "foo_b.jpg"< /code> < /p>

Почему? Какое это условие? Что заканчивается 33VW 

? 650px*33/100 ? Как это связано с 300W ? Как это ближе к 768W < /code>?

Обратите внимание, что я на самом деле не спрашиваю об этих конкретных значениях, но общий рабочий процесс. /> Сопоставления (((min-width: 600px) и (max-width: 1000px))
[*] 650px @ dpr 1.0 = 650w
[*] => 33VW = 650W*33/100 = 5w
[*]

Подробнее здесь: https://stackoverflow.com/questions/551 ... tion-appli