259  /  328

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

Просмотров: 823 (Статистика ведётся с 06.02.2017)
Дата последнего изменения: 01.06.2016

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

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

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 устройства. Также можно указывать разрешения экранов.


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

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