宿迁网站建设_宿迁网站制作_宿迁网络公司_宿迁做网站_宿迁网站优化
宿迁网站建设 服务热线:13951395765
您当前所在的位置:宿迁网站建设 >首页 > 网站建设常识

网站建设常识

Knowledge

怎么解决响应式网站图片自适应难题

 随着移动设备的普及,不同尺寸的显示终端越来越多,这些让我们看到了响应式网站普及的曙光光及迫切需求。但响应式网站一个必须要解决的问题:如何将网站中的图片图片响应式。一张大图如果PC端、平板端、手机端都是一样大的话,实在太不科学了,一是手机流量占用过大,下载速度慢;其次就是图片尺寸大比例压缩后会变得模糊。

图片分为背景图片和通过img标签引入的图片,前者可以通过media query自动的切换不同分辨率的版本,但是在不支持background image size的浏览器中背景图片无法无级的调整大小(也就是在media query切换css的点上可以换一张不同分辨率的图,但是没法儿获得两张分辨率中间大小的版本),而且在很多情况下(比如cms中)并不适合用背景图片。

如果是img标签引入的图片,可以使用延迟加载的方式来加载,在实际加载图片之前先用js检查窗口宽度,然后加载不同分辨率的图片,比如宽度<=480,就加载80px宽度的图片,480 < 宽度 <= 768,加载120px的图片, 宽度> 768则加载160px的图片,如果宽度是600px怎么办呢,通过百分比来缩放120px的图片达到合适的结果。

设计优势 独立的设计团队 带给您全新的视觉体验
功能开发 强大的技术实力,完成您想要的任何功能
售后服务 完善的售后服务,解决您在使用过程中遇到的问题
联系电话:13951395765
2006-2018 版权所有 宿迁新动力软件开发有限公司