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.

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

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