響應式圖片
阿新 • • 發佈：2017-08-20
ctype pict dia img 頁面 clas 素材 idt char
<picture>元素與<source>元素
例如需要分別在小於640px 大於640px 小於960px 和 大於960px的3個區域內使用small.jpg medium.jpg large.jpg可以這麽編碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>響應式圖片</title> 8 </head> 9 <body> 10 <picture> 11 <source media="(max-width:640px)" srcset="[email protected] 2x, small.jpg 1x"/> 12 <source media="(max-width:960px)" srcset="[email protected] 2x, medium.jpg 1x"/> 13 <source srcset="[email protected] 2x, large.jpg 1x"/> 14 <img src="small.jpg" alt=""> 15 </picture> 16 </body> 17 </html>
分析
max-width:640px 表示頁面不足640px
[email protected] 2x, small.jpg 1x告訴瀏覽器該來源為同一素材提供了兩種清晰度的版本
響應式圖片