HTML5 响应式图片

末蓝、 2022-05-27 01:52 188阅读 0赞

# 响应式图片的核心目的 #

只写一遍代码，就能适用所有设备。  
（img 标签 等价于 image 标签）

## 1、通过 srcset 切换分辨率 ##

### （1）通过分辨率切换 ###

分辨率可以在JS中通过 `window.devicePixelRatio` 来获取。  
在网页中滑动滚轮可以改变 devicePixelRatio 的值。  
在不切换图片的前提下，devicePixelRatio 越大，虽然像素值不变，但图像显示增大了。  
当分辨率小于等于 1 时，显示 1x.png；当分辨率大于 1 且小于等于 2 时，显示 2x.png 以此类推。  
2x 时，图片的像素值只有 1x 的一半。  
图片大小不随视口变化。

### （2）通过指定图片的像素切换 ###

这里的 w 表示的是 “视口宽度（window.innerWidth）”。  
当视口宽度小于 400 时，显示 400.png；当视口 大于400，时显示 800w.png。  
图片像素值随着视口大小变化而变化（正比），但每次遇到零界点之前（这里指399和799），又会从初始大小开始变化。  
浏览器会选取 w值最接近且大于`window.innerWidth * window.devicePixelRatio` 的图片。

## 2、srcset 和 sizes 联合切换 ##

传统意义上的 vw 指的是 “视口宽度（window.innerWidth）“ 的 1%，但这里指的是相对原始 w，仅显示百分之几。  
sizes 仅用在控制多大的视口宽度显示多大的图片，至于到底使用哪副图片，还是看哪个的 w 值 最接近且大于`window.innerWidth * window.devicePixelRatio`

注意 sizes 中条件语句的顺序，浏览器在满足第一个后就会立即采用并忽略其它。

## 3、picture 元素 ##

该元素最为简单和直观！  
图片的宽高可使用不带单位的 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>

![这里写图片描述][70]  
![这里写图片描述][70 1]

[70]: /images/20220527/27efa0a53eec4d5e8a938100b976b02e.png
[70 1]: /images/20220527/1d8b18c970d5474ba3b94d3ccc7ef513.png