Question

对于我的大部分博文，我需要为桌面版和移动版使用两种不同的图像。有时这是因为放置问题，但它主要是为了推广我的产品。我希望在桌面之间有一个更宽的图像在段落之间，但是在同一个地方有一个更方形的移动图像，所以它不会被压扁并且难以阅读图像中的文本。

我在我的WordPress主题（Sprout）中的自定义CSS模板中使用@media查询完成了这项工作，并且通常可以正常工作 - 但不能放在我的放大器页面上。

@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/ VS http://www.smartfertilitychoices.com/5-sugar-hacks-dessert-pcos/amp/

在博客文章的底部，有一个图片宣传我的10周计划并使用上面的代码，它根据常规帖子上的浏览器宽度显示不同的图像，但不显示AMP帖子。

有没有办法在我的AMP帖子上隐藏图像的桌面版本？

谢谢！

Answer 1

AMP页面中不允许直接使用

img标记;而是使用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页面）。

所以：

@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;
    }
}

Answer 2

我强烈反对使用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不支持图片元素，但您可以使用element media queries复制行为：

<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>

这也将确保只下载一个图像。

Answer 3

查看源代码，您似乎正在运行AmpForWP，而您似乎已经在使用custom CSS editor。 beat-pcos-10-week-program-ad-mobile类似乎没有在AMP页面的任何位置定义，因此解决方案是将CSS发布到AmpForWP的自定义编辑器以及主桌面主题中。

如何让图像的CSS媒体查询在AMP帖子上工作？

3 个答案: