306  /  385

Приемы верстки

Просмотров: 6080
Дата последнего изменения: 10.08.2020
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

В этом разделе собраны типовые подходы к решению частых задач верстки.

Использование оптимальных изображений под разные браузеры и устройства

WebKit поддерживает srcset атрибут изображений в img и image-set в стилях. Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей.

Обязательно задается изображение для браузеров не поддерживающих это свойство.

.class {
  /* задаем фоновое изображение, если браузер не поддерживает image-set */
  background-image: url(image-set-not-supported.png);
  /* задаем фоновые изображения, для различных разрешений */
  background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x);
  background-size: cover;
}

Не забудьте использовать свойство background-size для того что бы большие изображения корректно отображались.

Атрибут srcset работает аналогичным образом.

<img src="srcset-not-supported.png" srcset="low-res-image.jpg 1x, high-res-image.jpg 2x">

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


10
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии