Перейти к содержимому
Наше приложение «Дешевые авиабилеты» в AppGallery >>

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 (установка на сайт)

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

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