jquery - 如果移动屏幕尺寸，则用其替代文本替换图像

Question

例如，我有一个徽标，当屏幕尺寸低于 480 像素时，图像会隐藏，并且其 alt 文本会显示为替换。

我想知道是否有一个简单的纯 CSS 解决方案或者我需要使用 jQuery 吗？

Answer 1

使用 CSS 真正可以做的唯一一件事就是使用标准图像替换技术来实现所需的断点。

http://cssdeck.com/labs/0r7hlsnt

<h1>Meow</h1>

@media (min-width: 480px) {
  h1 {
    background: url(http://placekitten.com/400/200) no-repeat;
    height: 200px;
    text-indent: -100em;
  }
}

任何图像替换技术都可以。

Answer 2

使用适当的媒体查询，你能做到：

img::after {
    content: attr('alt');
}

仍然，

img {
    display: none;
}

也可能隐藏 after 部分。