为了账号安全,请及时绑定邮箱和手机立即绑定

Responsive设计

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

这段代码是什么意思?

正在回答

2 回答

要结合整片文章来看,@media (min-device-width:600px) 当设备的宽度大于600px的时候,就使用 data-src-600px这个属性的图片。<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />。因为data-src-600px="image-600px.jpg",所以就是image-600px.jpg这张图片。

2 回复 有任何疑惑可以回复我~
#1

Jaris 提问者

那为什么在content中要加入url?
2017-08-15 回复 有任何疑惑可以回复我~

我觉得这个跟attr有关,这是在jquery里面用于获取或者改变元素属性值的命令,比如<img src="1.png"/>,有一属性名是src,src的属性值是1.png。但如果我想把图片换成2.png,又不想改变html布局时,用jquery命令$("img").attr(src,"2.png");就可以改变图片的src了 。<img src="image.jpg" data-src-600px="image-600px.jpg" alt="" />这个里面src的值是image.jpg。但是后面还有一个属性名data-src-600px,它的值是image-600px.jpg。而在css3中,url是个专指链接的命令,所以content: attr(data-src-600px,url);意思就是获取data-src-600px的链接地址,也就是"image-600px.jpg"。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

Responsive设计

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信