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

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы