精品网站建设
BOUTIQUE WEBSITE
08
18
响应式网站怎么处理图片大小
发布者：深圳网站建设 来源：www.lonwin.net时间： 2019-10-22 18:20
现在的用户浏览网站的设备越来越多样化了，有PC、平板、手机，而且屏幕尺寸也大有不同，所以现在越来越多的企业选择做响应式网站，响应式网站可以自适应屏幕尺寸，但是有一点不好，就是图片太大，在PC上可能不明显，但在手机上就显得有点大了，如果不是用Wifi的话，消耗手机流量还是挺大的，下面中为科技深圳网站建设公司就来分享一下响应式网站怎么处理图片大小？
响应式网站怎么处理图片大小
一、采用srcset属性，如下代码
<img src="默认图片" alt="" srcset="1倍大图 600w 200h 1x, 2倍大图 600w 200h 2x, 小图 200w 200h">
srcset里面是根据媒体查询条件显示不同图片，跟上面差不多一样，表达方式不一样，1x表示显示器像素密度显示倍数。正常我是两者结合的方式实现，各大浏览器最新的版本基本都支持，但是IE系列的不支持，比较严重的问题是QQ浏览器以IE为内核，微信浏览器不支持，而微信在国内的使用率非常高，加上微信公众平台的微官网是客户的常见需求,最后解决办法是使用Picturefill，效果非常好。
二、采用picture元素，如下代码
<picture alt="">
<source src="大图路径" alt="" media="(min-width: 640px)">
<source src="小图" alt="" media="(max-width: 639px)">
<img src="默认图片" alt="" alt="">
</picture>
想要提高网站的用户体验，响应式网站是基本，在做好响应式网站的同时，还有充分考虑用户体验，现在的互联网时代，是用户体验为王的时代，只要网站用户体验做的好，网站的流量自然就会高。
