響應式圖片

時間 2019-11-19

標籤響應圖片简体版

原文原文鏈接

<picture>元素與<source>元素html

例如須要分別在小於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="small@2x.jpg 2x, small.jpg 1x"/>
12         <source media="(max-width:960px)" srcset="medium@2x.jpg 2x, medium.jpg 1x"/>
13         <source srcset="large@2x.jpg 2x, large.jpg 1x"/>
14         <img src="small.jpg" alt="">
15     </picture>
16 </body>
17 </html>

分析ui

max-width:640px  表示頁面不足640px

small@2x.jpg 2x, small.jpg 1x  告訴瀏覽器該來源爲同一素材提供了兩種清晰度的版本

相關標籤/搜索