一、响应式图片
1.1 设备像素比devicePixelRatio简单介绍
- 物理像素：我们把分辨率的像素称之为物理像素或设备像素（如
iPhone 7的物理像素为750px * 1334px），它是显示设备中一个最微小的物理部件。
- 设备独立像素：
CSS的尺寸像素称之为设备独立像素（device-independent pixels简称为“DIPs”）或CSS像素（如iPhone 7的设备独立像素为375px * 667px），它是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
window.devicePixelRatio（简写DPR）:
- 用来描述物理像素与设备独立像素的比例，其值等于 “物理像素 / 设备独立像素”。
devicePixelRatio值为 1 时就是我们的标准屏，值为 2 时则是我们俗称的 2 倍屏（2x），同样 3 就是 3 倍屏（3x）。
1.2 响应式图片srcset属性
srcset属性：用于浏览器根据宽、高和像素密度来加载相应的图片资源
- 格式：
srcset = "图片路径 宽/高/像素密度, 图片路径 宽/高/像素密度"- 宽：
128w- 像素密度：
1x【其实就是几倍屏的意思】
<!-- w描述符 -->
<img srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w">
<!-- x描述符：表示几倍屏 -->
<img srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x, mm-width-512px.jpg 3x">
1.3 响应式图片sizes属性
sizes属性明确定义了图片在不同的media conditions下应该显示的尺寸。格式如下：
<img src="one.png"
srcset="two.png 100w, three.png 500w, four.png 1000w"
sizes="<media condition> <width>,
<media condition> <width>,
<optional default image width>"\>
Media Conditions：媒体查询条件width：可以使用任意的长度单位，比如：em,rem,pixels, 和viewport width。【百分比单位是不允许的，如果需要使用相对单位，vw是推荐使用的。】<optional default image width>：除查询条件外的默认的图片的宽度
1.4 demo
<h2>图片1</h2>
<img
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px"
>
<h2>图片2</h2>
<img
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) calc(100vw - 20px), 128px"
>
- 先说说上面的代码是什么意思：
- 上面的
img：设置的sizes属性值为(max-width: 360px) 340px, 128px，表示 当视区宽度不大于360px时，图片的宽度限制为340px；其他情况下使用128px- 下面的
img：设置的sizes属性值为(max-width: 360px) calc(100vw - 20px), 128px, 表示当视区宽度不大于360px时，图片的宽度限制为屏幕宽度减20px；其他情况下使用128px
- 当在
pc端打开上面的demo时，两个img展现的都是128.jpg这张图片
- 原因如下：
- 由于桌面的显示宽度远远大于
360px，所以图片计算的尺寸宽度为128px； 加上屏幕密度为1，因此正好是128w这个规格，于是加载128x.jpg这张图片。
- 当在
iphone6下打开上面demo， 两个img展现的都是256.jpg这张图片
- 原因如下：
- 屏幕宽度为
375px， 依然大于360px，但是其屏幕密度是2，因此，图片尺寸128px乘以密度2，正好是256w这个规格，于是加载256x.jpg这张图片
- 当在
iphone6 plus下打开上面demo， 两个img展现的都是512.jpg这张图片
- 原因如下：
- 屏幕宽度为
414px， 依然大于360px，但是其屏幕密度是3，因此，图片尺寸128px乘以密度3，正好是384w这个规格，由于这个规格比较靠近512w，所以选择512w这个规格， 于是加载512x.jpg这张图片
- 就像上面所说的，计算出的规格是
384w，但是实际规格没有，就选择比384w大的规格512w- 如果计算出的规格是
600w， 实际规格没有，也选择比600w小的规格512w
1.5 srcset and sizes 兼容性
1.6 image-set()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式图片 - imgage-set()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.eg {
width: 200px;
padding-top: 56.25%;
background: -webkit-image-set(url("mm-width-128px.jpg") 1x, url("mm-width-256px.jpg") 2x, url("mm-width-512px.jpg") 3x) no-repeat;
background: image-set(url("mm-width-128px.jpg") 1x, url("mm-width-256px.jpg") 2x, url("mm-width-512px.jpg") 3x) no-repeat;
}
</style>
</head>
<body>
<h2>image-set()</h2>
<div class="eg"></div>
</body>
</html>
- 兼容性
