Как заставить медиа-запросы CSS для изображений работать с сообщениями AMP?

Для большинства моих сообщений в блоге мне нужно использовать два разных изображения для рабочего стола и мобильного устройства. Иногда это из-за проблем с размещением, но в основном это связано с продвижением моих продуктов. Я хотел бы иметь более широкое изображение на рабочем столе между абзацами, но изображение более квадратной формы для мобильных устройств в том же месте, чтобы оно не было сжатым и трудно читаемым текстом на изображении.

Я сделал это, используя запросы @media в моем собственном шаблоне CSS в моей теме WordPress (Sprout), и обычно это работает нормально, но не на моих страницах усилителя.

@media (min-width: 980px) {
    img.beat-pcos-10-week-program-ad-mobile.aligncenter {
    display: none;
}
}
@media (max-width: 980px) {
    img.beat-pcos-10-week-program-ad-desktop.aligncenter {
    display: none;
}
}

Например:

http://www.smartfertilitychoices.com/5-sugar-hacks-dessert-pcos/ против http://www.smartfertilitychoices.com/5-sugar-hacks-dessert-pcos/amp/

В нижней части сообщения в блоге есть изображение, рекламирующее мою 10-недельную программу, и с использованием приведенного выше кода оно показывает другое изображение в зависимости от ширины браузера в обычном сообщении, но не в сообщении AMP.

Есть ли способ скрыть настольную версию изображения в моих сообщениях AMP?

Спасибо!


wordpress css amp-html
person kcampbell    schedule 24.10.2017    source источник
comment
Медиа-запросы поддерживаются — пробовали ли вы? отладка, чтобы увидеть, что не так?   -  person Ken Y-N    schedule 24.10.2017

Ответы (3)


arrow_upward
0
arrow_downward

Я настоятельно рекомендую не использовать медиа-запросы CSS для отображения или скрытия изображений в зависимости от размеров устройства (для страниц AMP и не AMP). Проблема в том, что даже если изображение скрыто через display: none, оно все равно будет загружено. Это означает, что в вашем случае пользователю всегда придется загружать обе версии вашего изображения, что является пустой тратой трафика.

Вот два возможных подхода, чтобы избежать этого для страниц AMP и не AMP:

Без AMP

Для страниц без AMP вы можете использовать элемент picture. Это позволяет указать разные источники для разных размеров устройства. Браузер загрузит только то изображение, которое подходит для текущего устройства:

<picture>
 <source srcset="wide.png" media="(min-width: 980px)">
 <img src="square.jpg" alt="...">
</picture>

AMP

AMP не поддерживает элемент изображения, но вы можете воспроизвести его поведение с помощью элементные медиа-запросы:

<amp-img
    media="(max-width: 980px)"
    src="square.jpg"
    width=400
    height=400
    layout="responsive">
</amp-img>
<amp-img
    media="(min-width: 980px)"
    src="wide.jpg"
    width=1280
    height=768
    layout="responsive">
</amp-img>

Это также гарантирует, что будет загружено только одно изображение.

person Sebastian Benz    schedule 24.10.2017
comment
Спасибо! Кажется, это работает до сих пор с изображениями, которые находятся в одном месте для мобильных и настольных компьютеров. У меня есть некоторые изображения, которые будут располагаться немного выше на настольном компьютере, чем на мобильном устройстве, например, изображение, которое я хочу справа от фрагмента текста, помещается в начало этого абзаца, но на мобильном устройстве я хочу, чтобы изображение появляются после абзаца. Можно ли вообще скрыть/показать изображения для определенной ширины с помощью элемента ‹picture›? Я не силен в этом, извините! - person kcampbell; 25.10.2017
comment
Привет, это больше не работает ... кажется, последнее обновление Wordpress теперь удаляет элементы picture и amp-img при обновлении сообщений в блоге примерно так: <div class="hidden-sm hidden-xs"> <img src="IMG-URL" class="alignright" alt="ALT-TEXT" width="390" height="325"></div> Который все еще работает для обычного сообщения в блоге, но класс div для скрытие/отображение в зависимости от размера устройства не работает для страниц усилителя. Есть идеи, куда идти? Я разместил еще одну тему на форуме, а также связался с AMPforWP (плагин, который я использую). Просто обращайтесь сюда, если вы можете помочь! спасибо :) - person kcampbell; 13.12.2018

arrow_upward
0
arrow_downward

img теги не разрешены непосредственно на страницах AMP; Вместо этого используются теги amp-img. Итак, предполагая, что ваши теги img преобразуются в теги amp-img, вы можете попробовать применить свои медиа-запросы к amp-img с классом beat-pcos-10-week-program-ad-mobile вместо img. Или, что еще лучше, примените свои медиа-запросы к тегам amp-img и img с классом beat-pcos-10-week-program-ad-mobile (таким образом он будет работать как для страниц AMP, так и для страниц без AMP).

So:

@media (min-width: 980px) {
    img.beat-pcos-10-week-program-ad-mobile.aligncenter,
    amp-img.beat-pcos-10-week-program-ad-mobile.aligncenter {
        display: none;
    }
}
@media (max-width: 980px) {
    img.beat-pcos-10-week-program-ad-desktop.aligncenter,
    amp-img.beat-pcos-10-week-program-ad-desktop.aligncenter {
        display: none;
    }
}
person rodders    schedule 24.10.2017

arrow_upward
-1
arrow_downward

Судя по вашему исходному коду, вы используете AmpForWP и уже используете пользовательский редактор CSS. Кажется, что класс beat-pcos-10-week-program-ad-mobile не определен нигде на вашей странице AMP, поэтому решение состоит в том, чтобы опубликовать свой CSS в пользовательском редакторе AmpForWP, а также в редакторе вашей основной темы рабочего стола.

person Ken Y-N    schedule 24.10.2017