宿迁网站建设 服务热线：13951395765
随着移动设备的普及，不同尺寸的显示终端越来越多，这些让我们看到了响应式网站普及的曙光光及迫切需求。但响应式网站一个必须要解决的问题：如何将网站中的图片图片响应式。一张大图如果PC端、平板端、手机端都是一样大的话，实在太不科学了，一是手机流量占用过大，下载速度慢;其次就是图片尺寸大比例压缩后会变得模糊。
图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
