Responsive設計
img[data-src-600px]{
?content: attr(data-src-600px,url);
?}
這段代碼是什么意思？
Jaris
2017-08-11
2 回答
舉報
0/150
提交
取消
2017-08-11
要結合整片文章來看，@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這張圖片。
2017-10-11
我覺得這個跟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"。