3 二倍图
3.1 物理像素&物理像素比
物理像素就是分辨率，物理像素点指的是屏幕显示的最小颗粒，而物理真实存在的。这是厂商在出厂时就设置好了，比如苹果6\7\8是 750*1334
我们开发时候的1px不是一定等于1个物理像素的。
PC端页面，1个px等于1个物理像素的，但是移动端不尽相同。
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。
pc端和早前的手机屏幕/普通手机屏幕：1CSS像素=1物理像素的。
Retina(视网膜屏幕)是一种显示技术，可以将更多的物理像素点压缩至一块屏幕，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
例如：一个50*50px（css像素）的图片直接放到我们的iPhone8里面会放大2倍，100*100，图片就会模糊。我们采取的是直接放一个100*100图片，然后手动把这个图片缩小为 50*50px（css像素）.我们准备的图片比我们实际需要的大小 大2倍，这就是二倍图。
3.2 多倍图
对于一张50*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
通常使用二倍图，因为iPhone6\7\8的影响，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。
背景图片注意缩放问题。
3.3 背景缩放
background-size属性规定背景图像的尺寸
background-size
background-size： 背景图片的宽度px 背景图片高度px;
background-size： 背景图片的宽度px; 高度会等比例自动缩放
可以跟百分比，是父盒子的百分之多少
background-size： 50%;
单位：长度或百分比或cover或contain
background-size：cover 把背景图像扩展至足够大，使背景图像完全覆盖背景区域，可能有部分背景图像显示不全。
background-size：contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
/*在iPhone8下面*/
img{
/*原始图片100*100px*/
width: 50px;
height: 50px;
}
.box{
/*原始图片100*100px*/
background: url(1.jpg) no-repeat;
background-size: 50px 50px;
}
</style>
<body>
<img src="1.jpg">
<div class="box"></div>
</body>
</html>3.4 多倍图切图工具cutterman
@3x 3倍图
@2x 2倍图
@1x 1倍图 原图
