WordPress. Изображение от размера экрана

Смена изображения в зависимости от размера экрана на устройстве пользователя. Как отображать отдельные изображения для смартфона, планшета и компьютера?

Содержание

1. Изображение от размера экрана

2. Пример смены изображений

Изображение от размера экрана

Смена изображения в зависимости от размера экрана необходима для того, чтобы все детали рисунка (надписи, мелкие элементы) были четко различимы на любом устройстве пользователя: как на компьютере, так и на планшете или смартфоне.

Код смены изображения размещается в файле style.css дочерней темы. Изначально код использовался для отображения рекламных баннеров.

/* автобаннер */

.avtobanner-300x250 {

display: block;

margin: auto;

}

.avtobanner-468x60 {

display: none;

margin: auto;

}

.avtobanner-728x90 {

display: none;

margin: auto;

}

@media (min-width: 490px) {

.avtobanner-300x250 {

display: none;

}

.avtobanner-468x60 {

display: block;

}

@media (min-width: 750px) {

.avtobanner-468x60 {

display: none;

}

.avtobanner-728x90 {

display: block;

}

/* конец автобаннера */

Сначала идет описание контейнеров под изображения, причем контейнер avtobanner-300x250 отображается на экране по умолчанию (display: block;), остальные – скрыты (display: none;).

При увеличении размера экрана до 490px (@media (min-width: 490px)) контейнер avtobanner-300x250 скрывается, а avtobanner-468x60 – отображается.

При увеличении размера экрана до 750px (@media (min-width: 750px)) контейнер avtobanner-468x60 скрывается, а avtobanner-728x90 – отображается. Контейнер avtobanner-300x250 остается скрытым, так как размер экрана больше 490px.

Состояние контейнеров в зависимости от размеров экрана описывает следующая таблица:

Контейнер	Размер экрана
Контейнер	до 490px	от 490px до 750px	от 750px
avtobanner-300×250	block	none	none
avtobanner-468×60	none	block	none
avtobanner-728×90	none	none	block