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

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

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

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

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

Сначала идет описание контейнеров под изображения, причем контейнер 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

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

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

На странице WordPress или в виджете размещается следующий код:

Размер изображений может быть любым, подходящим по ширине.

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


Стандартные размеры баннеров в этом примере изменены, чтобы их не скрывал блокировщик рекламы.


Другие статьи:
WordPress. Добавление кнопок в HTML-редактор
WordPress. Создание рекламных баннеров
WordPress. Заголовки безопасности (security headers)
WordPress. Admitad Teleport Script (установка на сайт)

Наши сайты размещены на виртуальном хостинге от провайдеров Beget и Timeweb.

Добавить комментарий

Ваш комментарий будет опубликован после прохождения обязательной модерации. Исходящие ссылки не допускаются. Время модерации составит от нескольких минут до нескольких часов в зависимости от времени суток и занятости модератора.