Question

我注意到这个Q＆amp;这里有一个stackoverflow：how to specify a different image in css depending if the user visits on a desktop or a mobile browser

他的HTML：

<img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

和CSS是：

img[data-src-960px] {
            content: attr(data-src-960px, url);
        }

我正在尝试将此内容合并到网页中，但我的失败很糟糕......

我的HTML：

<div class="container">
    <div><img src="images/header.jpg" data-src-mobile="images/header_mobile.jpg" alt="Philadelphia" /></div>
</div>

我的CSS：

img[data-src-mobile] {
    content: attr(data-src-mobile, url) !important;
}

我有一个专门用于移动设备的整个样式表。但这根本不起作用。它总是加载：images/header.jpg

url中的attr参数是否应该包含某些内容？我已尝试将url替换为../images/header_mobile.jpg，但这也不起作用。

你怎么用这个？我似乎无法在互联网上找到这方面的细节...... :(

这里有什么值得参考的人说这个有用：

Using CSS/HTML to Make a Responsive Website in 3 Easy Steps

Responsive images using CSS3

Answer 1

使用max-width，:after，content:url和@media screen and (min-width: 961px) { a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png");} } @media screen and (max-width: 960px){ a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png");} }。例如：

＆＃13;

<a tabindex="1"></a>

＆＃13;

dplyr

＆＃13;

<强>参考

如何通过媒体查询使用CSS3加载图像？

1 个答案: