h5的data-*属性以及响应式图片替换

定义

data-*全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力。

用法

指路

响应式里的运用

我们有时需要有更多的图像控制权，例如根据客户端的显示大小，显示不同的图像。（这里采用自定义属性储存相关的图片数据）

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

正如你可以看到，我们使用 data-* 属性来存储替换图像的 URL。现在，让我们使用强大的 CSS3 来为匹配 min-device-width 条件的媒体指定替换图像：

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}