伴随着高新科技的转变,移动终端的普及化,不一样规格的移动终端愈来愈多,这种使我们看到了响应式网址普及化的黎明及急切要求。
但响应式网址有一个务必要处理的难题:如何把网址中的照片兼容到响应式。一张大图图片假如PC端、平板电脑端、移动端全是一样大得话,真是太不合理了,一是数据流量占有过大,下载速度慢。次之便是图片大小大占比缩小后会越来越模糊不清。
假如照片是以情况方法存有,这类比较好处理,能够 选用媒体查询,为不一样规格的显示设备设定不一样照片。如果是网页页面中插进的照片处理起來就非常复杂一点了。
一、选用srcset特性
srcset里边是依据媒体查询标准显示信息不一样照片,跟上边类似一样,表达形式不一样,1x表明显示屏屏幕像素密度显示信息倍率。
一切正常我是二者融合的方法完成,各种电脑浏览器全新的版本号基础都适用,可是IE系列产品的不兼容,这使我们觉得十分头疼。
情况严重的难题是QQ浏览器以IE为核心,微信浏览器不兼容,而手机微信在中国的利用率十分高,加上微信公众账号台的微网站是顾客的普遍要求,最终解决方案是应用Picturefill,实际效果很好。
二、选用picture原素
在追求响应式网站建设的的浪潮中,期待别忘记了客户体验,仅有让网址中全部的原素都能做到响应式的规范,才算是真实的响应式网址。