目前，在手机等移动设备上开发网站已经有了比较好的解决方案。一种是响应式网站。和笔者的博客一样，PC网站就是手机网站。独立于PC网站，类似于淘宝。从网站SEO的角度来看，两者并无区别，各有优缺点。无论采用哪种方式，同样可以解决移动设备浏览的问题。随着越来越多的移动设备和类型，我们几乎不可能为某一类型的设备建立一个单独的网站。不管PC网站和手机网站是不是分开建的，都意味着我们的手机网站将面临越来越多不同的设备访问，也就是说，即使我们单独建手机网站，也要考虑到该网站符合用户的设备特性。一般来说，网站很容易实现自适应。笔者的博客是一个全自适应的网站，但是自适应的网站有个难点，就是图片的问题。图片在网页中的重要性不用多说。如何向用户展示合适的图片，一般有以下几种方法：1.直接在html中添加优质图片，当用户使用不同设备访问时，通过CSS或javascript控制图片大小，从而忽略不同设备的大小，但它可能会增加访问时间并消耗过多的移动流量，因为加载太大的图片会占用太多带宽。2、异步加载，提前加载一个小图片页面，然后通过javascript获取用户设备信息，按需加载图片，解决了速度问题，可能对网站排名不利。3、使用javasctipt在html头部生成cookie，包含设备分辨率、像素比例等信息。当用户代理请求图像时，这个cookie将与其他请求信息一起发送到服务器。服务器获取到cookie后，会对图片进行处理，然后发送给客户端。这样解决了图片大小和优化的问题，但是灵活性差，可能会因为用户不支持cookies而导致工作失败。另外，在网页头部添加javascript的方式总让人觉得有些奇怪。为了解决移动开发中的图片响应问题，HTML5标准专门增加了img标签的srcset和sizes属性。srcset是一个或多个字符串的逗号分隔列表，指示用户代理使用的一系列可能的图像。每个string列表包含一个图像URL和可选的宽度描述符（以像素为单位加“w”）和像素密度描述符（像素比率+“x”，默认为1x），w和x不能同时使用。sizes一个或多个以逗号分隔的字符串，表示资源大小。每个资源大小由媒体条件和资源大小值组成，用于指定图像的预期大小。当srcset使用'w'描述符时，如果img不包含srcset或srcset中没有'w'描述符，则用户代理使用当前图像大小在srcset中选择合适的图像URL，sizes将不会生效.所选尺寸会影响图像的显示尺寸（如果未应用CSS样式）。如果未设置srcset属性或没有值，则sizes属性将无效。读起来很费劲。要想弄清楚，你必须了解三个概念：设备CSS像素、设备物理像素和设备像素比。不知道的可以看看我之前的文章。宽度问题。如果你弄清楚了以上三个概念，你就知道，为了让图片显示更清晰，一些高端设备会在浏览器底部对图片进行压缩，使用两个或更多的物理像素来显示图片。显示器。一个csspixel，可以理解为w是指设备的物理像素宽度，x是指设备的设备像素比，那么下面两段代码的意思是：
