HTML5中picture元素响应式处理图片的方法
这篇文章主要介绍“HTML5中picture元素响应式处理图片的方法”,在日常操作中,相信很多人在HTML5中picture元素响应式处理图片的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML5中picture元素响应式处理图片的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
目前创新互联公司已为千余家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、靖州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
响应式设计
所谓的响应式设计,是指在不同的屏幕分辨率,不同的像素密度比,不同宽度的终端设备中,网页布局可以自适应的调整。响应式设计的本意是使原本PC上的网站兼容移动终端,大部分响应式网页是通过媒体查询,加载不同样式的CSS文件实现的。这样的弹性化布局使网站在不同的设备终端布局都比较合理。
虽然响应式设计的好处多多,但是也有诸多缺陷。由于PC端和移动终端访问的是同一个网站,PC端可以不计较流量限制,但是移动端不可能不计较。
为适配不同终端机型的屏幕宽度和像素密度,我们一般会使用如下方法设置图片的CSS样式:
将图片的最大宽度设置为100%,以确保图像不会超出其父级元素的宽度,如果父级元素的宽度发生改变,图片的宽度也随之改变,height:auto 可以确保图片的宽度发生改变时,图片的高度会依据自身的宽高比例进行缩放。
这样当我们在移动设备上访问响应式网页里的图片时,只是把图片的分辨率做了缩放,下载的还是PC端的那张大图,这样不仅浪费流量,而且浪费带宽,而且会拖慢网页的打开速度,严重影响用户的使用体验。
新的解决方案:
如果
举几个栗子
如下栗子中针对不同屏幕宽度加载不同的图片;当页面宽度 在320px到640px之间时加载minpic.png;当页面宽度大于640px时加载middle.png
2.如下栗子中添加了屏幕的方向作为条件;当屏幕方向为横屏方向时加载_landscape.png结尾的图片;当屏幕方向为竖屏方向时加载 _portrait.png结尾的图片;
3.如下栗子中添加了屏幕像素密度作为条件;当像素密度为2x时加载_retina.png 2x 的图片,当像素密度为1x时加载无retina后缀的图片;
4.如下栗子中添加图片文件格式作为条件,当支持webp格式图片时加载webp格式图片,当不支持时加载png格式图片;
5.如下例子中添加宽度描述;页面会根据当前尺寸选择加载不大于当前宽度的最大的图片;
6.如下例子中添加sizes属性;当窗口宽度大于等于800px时加载对应版本的图片;
兼容性:
目前只有Chrome , Firefox , Opera 对其兼容性较好,具体兼容性如图:
优点:
加载适当大小的图像文件,使可用带宽得到充分利用;
加载不同剪裁并具有不同横纵比的图像,以适应不同宽度的布局变化;
加载更高的像素密度,显示更高分辨率的图像;
步骤:
创建标签;
在这些标签内创建一个你想用来执行任何一个特性的
添加一个media属性,用来包含你想要的特性,如宽度(max-width,min-width),方向(orientation)等;
添加一个srcset属性,属性值为相应的图像文件名称,进行加载。如果你想提供不同的像素密度,例如Retina显示屏,可以添加额外的文件名到srcset属性中;
添加一个回退的标签;
由上面的示例代码可知,在没有引入js和第三方库,CSS中没有包含media queries的情况下,
srcset (必需)
接受单一的图片文件路径(如:srcset=”img/minpic.png”).
或者是逗号分隔的用像素密度描述的图片路径(如:srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。
media (可选)
接受任何验证的media query,你可以看到在CSS @media选择器(如:media=”(min-width: 320px)”).
在之前的
sizes(可选)
接收单一的宽度描述(如:sizes=”100vw”)或者单一的media query宽度描述(如:sizes=”(min-width: 320px) 100vw”).
或者逗号分隔的media query对宽度的描述(如:sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一个被当做默认的。
type(可选)
接受支持的MIME类型(如: type=”image/webp” or type=”image/vnd.ms-photo”)
浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的
添加最后的元素
元素在
用来声明默认的图片显示。将标签放到
到此,关于“HTML5中picture元素响应式处理图片的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
文章题目:HTML5中picture元素响应式处理图片的方法
本文链接:http://pwwzsj.com/article/jjjhes.html