只写一遍代码，就能适用所有设备。 （img 标签 等价于 image 标签）
分辨率可以在JS中通过 window.devicePixelRatio 来获取。 在网页中滑动滚轮可以改变 devicePixelRatio 的值。 在不切换图片的前提下，devicePixelRatio 越大，虽然像素值不变，但图像显示增大了。 当分辨率小于等于 1 时，显示 1x.png；当分辨率大于 1 且小于等于 2 时，显示 2x.png 以此类推。 2x 时，图片的像素值只有 1x 的一半。 图片大小不随视口变化。
这里的 w 表示的是 “视口宽度（window.innerWidth）”。 当视口宽度小于 400 时，显示 400.png；当视口 大于400，时显示 800w.png。 图片像素值随着视口大小变化而变化（正比），但每次遇到零界点之前（这里指399和799），又会从初始大小开始变化。 浏览器会选取 w值最接近且大于window.innerWidth * window.devicePixelRatio 的图片。
传统意义上的 vw 指的是 “视口宽度（window.innerWidth）“ 的 1%，但这里指的是相对原始 w，仅显示百分之几。 sizes 仅用在控制多大的视口宽度显示多大的图片，至于到底使用哪副图片，还是看哪个的 w 值 最接近且大于window.innerWidth * window.devicePixelRatio
注意 sizes 中条件语句的顺序，浏览器在满足第一个后就会立即采用并忽略其它。
该元素最为简单和直观！ 图片的宽高可使用不带单位的 width 和 height 属性来设置。 当视图宽度大于 800 时，显示 800w.png；当视图宽度大于 400 时，显示 400w.png；视图宽度小于400则显示 original.png。 source 元素的作用仅仅是在满足 “媒体查询” 条件后，用 srcset 的内容替换 img 标签中的 src 内容。因此，要设置图片样式仅需要对 img 标签设置即可。 即使没有 width 与 height，图片也不会随着视口变换而变化
（该测试用例是配合 Vue.js 写成的）
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Vue中绑定全局事件onresize</title> <meta name="viewport" content="width=device-width"/> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <style> img { display: block; border: 1px solid black; } </style> </head> <body> <table id="app"> <tr><td>视口</td> <td>{{innerSize}}</tr> <tr><td>分辨率</td> <td>{{devicePixelRatio}}</td></tr> <tr><td>DPI</td> <td>{{deviceXDPI}}</td></tr> </table> <img src="origin.png" /> <img src="origin.png" srcset="1x.png 1x, 2x.png 2x"/> <img src="origin.png" srcset="400w.png 400w, 800w.png 800w"/> <img src="origin.png" srcset="400w.png 400w, 800w.png 800w" sizes="(min-width: 500px) 10vw, (min-width: 100px) 50vw"/> <img src="origin.png" srcset="400w.png 400w, 800w.png 800w" sizes="(min-width: 500px) 50vw, (min-width: 100px) 10vw"/> <img src="origin.png" srcset="400w.png 400w, 800w.png 800w" sizes="(min-width: 500px) 100vw, (min-width: 100px) 100vw"/> <picture> <source media="(min-width: 800px)" srcset="800w.png"/> <source media="(min-width: 400px)" srcset="400w.png"/> <img src="origin.png" alt="tip" width="100" height="50"/> </picture> <script> function getDPI() { var arrDPI = new Array; var tip; if (window.screen.deviceXDPI) { tip = "support window.screen.deviceXDPI"; arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.screen.deviceYDPI; } else { tip = "not support window.screen.deviceXDPI"; var tmpNode = document.createElement("DIV"); tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden"; document.body.appendChild(tmpNode); arrDPI[0] = parseInt(tmpNode.offsetWidth); arrDPI[1] = parseInt(tmpNode.offsetHeight); tmpNode.parentNode.removeChild(tmpNode); } return arrDPI + ' (' + tip + ')'; } new Vue({ el: '#app', data: { clientSize: document.body.clientWidth + ' * ' + document.body.clientHeight, offsetSize: document.body.offsetWidth + ' * ' + document.body.offsetWidth, scrollSize: document.body.scrollWidth + ' * ' + document.body.scrollHeight, innerSize: window.innerWidth + ' * ' + window.innerHeight, outerSize: window.outerWidth + ' * ' + window.outerHeight, availSize: window.screen.availWidth + ' * ' + window.screen.availHeight, screenSize: window.screen.width + ' * ' + window.screen.height, devicePixelRatio: window.devicePixelRatio + 'X', deviceXDPI: getDPI(), }, created() { const that = this; window.onresize = ()=> { that.clientSize = document.body.clientWidth + ' * ' + document.body.clientHeight; offsetSize = document.body.offsetWidth + ' * ' + document.body.offsetWidth; scrollSize = document.body.scrollWidth + ' * ' + document.body.scrollHeight; that.innerSize = window.innerWidth + ' * ' + window.innerHeight; that.outerSize = window.outerWidth + ' * ' + window.outerHeight; that.availSize = window.screen.availWidth + ' * ' + window.screen.availHeight; that.screenSize = window.screen.width + ' * ' + window.screen.height; that.devicePixelRatio = window.devicePixelRatio + 'X'; that.deviceXDPI = getDPI(); } } }) </script> </body> </html>
