Не понимаю как работают адаптивные изображения?

Question

[theWaR_13]

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

codepen.io/anon/pen/zreRWr?editors=1100

1 строка: выдать картинку 350x150 при разрешении меньше 768px
2 строка: выдать картинку 400x150 при разрешении меньше 768px и плотности пикселей x2
3 строка: выдать картинку 750x150 при разрешении меньше 1024px и при разрешении больше 900px отобразить ее на половину экрана, иначе отобразить ее на весь экран
4 строка: выдать картинку 800x150 при разрешении меньше 1024px и плотности пикселей x2

Заранее спасибо.

Answer 1

[Павел Алмазов]

Для этого используются медиа запросы подробнее тут
А если вкратце то там под каждый размер экрана пишется свои размеры например так.
//@media (min-width: 500px) and (max-width: 600px) {
// h1 {
// color: red;
// }

Это означает что если размер экрана 500px но не более 600px то цвет 'h1' станет красным (если в обычном запросе он другого цвета)

Comments

[theWaR_13]

Про медиа запросы я знаю, тут вопрос скорее в том, почему не работает одновременно max-width и min-resolution.

[Александр Варакосов]

theWaR_13: На деле, min-resolution и max-resolution применяются весьма редко. Главным образом для стилей печати и других устройств вывода малых разрешений.
С поддержкой тоже не всё радужно.
caniuse.com/#feat=css-media-resolution

[Александр Варакосов]

Александр Варакосов: Кроме того, в спецификации сказано, что эти теги принимают значения в dpi и dpcm.

[theWaR_13]

Александр Варакосов: ок, как мне тогда выдать картинку для ретина экрана?

[Александр Варакосов]

theWaR_13: ретина отличается высокой плотностью пикселей, как следствие, высоким разрешением. Основное решение, отказ от абсолютных размеров изображения и указание размеров в относительных единицах, например процентах, и использование изображений заведомо достаточного размера. Проблема подогревается яблочной техникой, которая может возвращать пересчитанное значение в качестве размеров вьюпорта, вместо реальных.

[theWaR_13]

Александр Варакосов: а зачем мне пользователю отдавать картинку, которая по весу в разы больше той, которая ему реально нужна?