响应式网站，pc和手机端是共用一张高分辨率图片好，还是各自用各自的

分开啊，最近我正在学习《所向披靡的响应式开发》分享部分笔记6.4 如何实现响应式图片-概述1(JS或服务端实现) 1.响应式设计让很多的web应用和网站都兼容手机、平板、PC等等各种设备,但是在流量昂贵的时代, 让一个手机去加载为大屏幕PC设计的几百k广告图片，显然用户是不能接受的。虽然这个图片看起来非常的清晰,但是疯长的浏览消耗会让用户苦恼,而且需要加载更长的时间才能把页面加载出来。 2.为了用户更好的体验,加载与用户设备相匹配的小图片,即快速,又不会影响用户的体验。 3.为了解决上述问题,响应式图片的概念随之产生了。 1.图片的排版和布局 2.根据设备大小加载不同的图片 4.如何实现响应式图片 1.js或服务器端 1.通过js或者服务端控制图片的加载,这种方式的原理跟踪Window Screen事件, 然后修改图片的路径,代码非常简单详情看demo responsiveimg.html 2.通过把屏幕信息或者设备信息写入cookie,在获取图片的时候,在服务器端决定返回那种图片,这样的话就不需要写脚本了。通过cookie和服务器端就可以实现, 兼容性也比较好通过js控制图片的加载代码如下<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Responsiveimg</title> </head> <body> <div class="content"> <img src=""> </div> </body> <script type="text/javascript" src="js/vendor/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function makeImageResponsive(){ var width=$(window).width(); var img=$('.content img'); if(width<=480){ img.attr('src','img/480.jpg'); } else if(width<=800){ img.attr('src','img/800.jpg'); } else{ img.attr('src','img/1600.jpg') } } // 在window加载和改变尺寸的时候调用方法 $(window).on('resize load',makeImageResponsive); }) </script> </html>还有其他方法1.srcset 2.srcset配合sizes 3.picture 图片4.SVG

响应式网站，pc和手机端是共用一张高分辨率图片好，还是各自用各自的

0回答