0

我在这里注意到关于stackoverflow的这个问答： 如何在css中指定不同的图像，具体取决于用户是在桌面还是移动浏览器上访问

他的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但这也不起作用。

你怎么用这个？我似乎根本无法在互联网上找到更多细节...... :(

对于这里的价值是一些对人们说这有效的参考：

使用 CSS/HTML 通过 3 个简单步骤制作响应式网站

使用 CSS3 的响应式图像

4

1 回答 1

0

使用min-width、和。max-width_ 例如：:aftercontent: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");}
}
<a tabindex="1"></a>

参考

于 2017-06-20T02:27:52.883 回答