联系我们
cms新闻网站系统、政府cms定制开发

广州网站建设公司-阅速公司

报纸新媒体网站内容发布一体化解决方案联系电话
/
http://www.kize.icu/
广州网站建设公司
您当前位置:首页>广州网站建设

广州网站建设

Html5不同手机设备(不同分辨率)加载不同的图片

发布时间:2014/11/18 10:58:11  作者:Admin  阅读:324  

Html5里实现不同手机设备或者不同分辨率加载不同大小的图片:

<picture width="500" height="500">

<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="small-1.jpg" alt="">

<p>Accessible text</p>

</picture>

可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

<picture>

<source media=”(min-width: 45em)” srcset=”large.jpg”>

<source media=”(min-width: 18em)” srcset=”medium.jpg”>

<img src=”small.jpg” alt=”Robert Anton Wilson laughing”>

</picture>

基本用法: 当设备宽度大于45em时启用large.jpg

相关文章
Html5
图片
cms新闻系统购买咨询
扫描关注 广州阅速软件科?#21152;?#38480;公司
扫描关注 广州阅速科技
莱万特s
三国全面战争技能 新疆风采喜乐彩开奖结果 下载手机版181招财鞭炮 俄罗斯方舟 川崎前锋比赛结果 金钱豹在线客服 湖北十一选五走势表 365天天捕鱼游戏 比特币软件交易平台 金门重庆时时彩计划群 二码合差3d缩水软件下载 甘肃11选5 新11选5玩法内蒙古 七乐彩走势图嗲连线 寻仙手游探索进度怎么完成 方舟子的微博