如果移动屏幕尺寸，则用替代文字替换图像

Question

E.g。我有一个标识，当屏幕尺寸低于480px时，图像隐藏，其替代文字显示为替代。

我想知道是否有简单的纯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;
  }
}

任何image replacement技术都可以。

Answer 2

使用适当的媒体查询，您可以这样做：

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

仍然，

img {
    display: none;
}

也可能隐藏后段。