一种是把移动网站和PC网站分开，类似淘宝那样。
从网站SEO的角度来说，两者并无差别，也各有利弊，不论采纳那种办法也都能办理移动设备浏览问题。
随着移动设备和类型越来越多，我们险些不太可能针对某一类设备培植单独的网站，不论PC网站和移动网是否分开培植，那都意味着我们的移动网站将会面临越来越多各不相同设备进行访问，也便是说纵然是培植单独的移动网站，我们也必须要考虑网站符合用户的设备特性。
一样平常来说，网站很随意马虎实现自适应，但自适应网站有一个难点，那便是图片问题，图片在网页中的主要性毋须去提，那么我们在移动网站中如何展示给用户得当的图片呢，一样平常有以下几种做法:
1,直接把质量最好的图片加入到html中，用户用不同的设备访问时，通过CSS或者javascript掌握其大小，这样直接忽略不同设备的尺寸，但可能会由于加载过大的图片占用太大带宽而增加访问韶光、耗费过多移动流量。
2,异步加载，事先加载一张较小的图片页面中，再通过javascript获取用户设备信息，按需加载图片，这样办理了速率问题，对付网站排名可能不利。
3,在html头部利用javasctipt天生一个cookie，包含设备分辨率和像素比等信息，在用户代理要求图片时，这个cookie会和其它要求信息一起发送到做事器，在做事端获取到cookie之后，对图片进行处理，然后传送给客户端。
这样做办理图片尺寸和优化问题，但灵巧性较差，还可能由于用户不支持cookie而导致事情失落败，其余在网页头部增加javascript的办法总让人觉得有那么一点奇怪。
为理解决移动开拓中的图片相应式问题，HTML5标准专门增加img标签的srcset和sizes属性，srcset以逗号分隔的一个或多个字符串列表表明一系列用户代理利用的可能的图像，每一个字符串列表包含一个图像的URL和可选的宽度描述符(像素加“w”表示)和像素密度描述符(像素比+“x”表示，默认为1x),w和x不能同时利用。
sizes表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括一个媒体条件和一个资源尺寸的值,
它用来指定图像的预期尺寸,当srcset利用 ‘w’ 描述符时，用户代理利用当前图像大小来选择srcset中得当的一个图像URL 如果img不包含srcset或者srcset中没有’w’描述符，sizes不生效。
当选中的尺寸影响图像的显示大小（如果没有CSS样式被运用的话）。如果没有设置srcset属性，或者没值，那么sizes属性也将不起浸染。
读起来很拗口，要弄彻底弄清楚，必须明白三个观点:设备CSS像素，设备物理像素，设备像素比，如果你不清楚，可以查看我之前的这篇文章相应式网站培植中的像素和宽度问题 。
如果你弄清楚了以上三个观点，知道一些高端设备为了让图片显示更清晰，会在浏览器底层把图片进行压缩，在显示器上用两个或者更多的物理像素显示图片上个一个CSS像素，就能理解在w是指设备的物理像素宽度，x是指设备的设备像素比，那么下面两段代码的意思分别是:
<img src=\"大众demo-small.jpg\公众 srcset=\公众demo-small.jpg 300w,demo-medium.jpg 600w,demo-big.jpg 750w\"大众>300物理像素宽的设备加载demo-small.jpg,600加载demo-medium.jpg,750加载demo-big.jpg<img src=\"大众demo-small.jpg\"大众 srcset=\"大众demo-small.jpg 1px,demo-medium.jpg 2x,demo-big.jpg 2.5x\"大众>1设备像素比加载demo-small.jpg,2加载demo-medium.jpg,2.5加载demo-big.jpg
我们这里碰着了一个问题，用w对像素的掌握更加灵巧，由于相同的设备像素比可能有着悬殊的像素差别，进而导致显示大小发生变革
例如，有两台设备，一台CSS像素宽720，像素比2，其余一台CSS像素宽1024，像素比也是2;有两张图片，分辨率分别为360200的demo-small.jpg和720400的demo-big.jpg，用像素比掌握显示:<img src=”demo-small.jpg” srcset=”demo-small.jpg 1px,demo-big.jpg 2x”>,则两台设备上都会显示分辨率为720400的demo-big.jpg，则他们所占屏幕宽度为:
设备1: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 50%
设备2: ([图片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 35%
用’w’描述符的办法可能非常灵巧的掌握加载的图片和展示的大小，还是上面的设备，可以通过w指定得当的图片，也可以通过sizes指定图片的显示大小。
综上我们可以得知，利用srcset和描述符，浏览器能根据客户真个情形，自动选择须要加载的图片，进行定向加载，相对付文章开头说的三种相应式图片的办理方案，灵巧性强，节省流量，快速网站加载速率，是更好的相应式图片办理办法。
动态Responsive Image天生方案
srcset方案的一个弊端是须要指定不同屏幕情形下的多个图片，如果手动天生这些图片，费时费力，利用Responsive Image工具，可以动态自动天生图片，操作如下：
1，下载代码，并把所有访问图片的要求重定向到Responsive Image的plm.php文件。
2，创建图片缓存目录，打开plm文件，根据提示做好配置。
3，获取指定图片的操作如下:
剪裁:example.com/example.jpg/(crop:[x[,y,]]width[,height])
缩放:example.com/example.jpg/(reduce:[x[,y,]]width[,height])
括号里面为动作，可以连续多次利用:
example.com/example.jpg/(crop:[x[,y,]]width[,height])/(reduce:[x,[y,]]width[,height])为前辈行剪裁，然后压缩处理
[]中的为可选值，x,y不填默认为0,height不填默认为图片高度（剪裁）和宽度缩小后图片高度（缩放）
可以参考Responsive Image的index.html文件进行配置。
文章来源网络，重在信息资源分享，如有问题请联系！
