【56】移动WEB开发(3)——二倍图

★文章内容学习来源：拉勾教育大前端就业集训营

---

★本篇学习目标：掌握二倍图的用法

---

目录：
一、物理像素点
二、物理像素比/屏幕像素比
三、Retina(视网膜屏幕)
四 、多倍图
五、常见多倍图切图格式

---

一、物理像素点

• 物理像素点：屏幕显示的最小颗粒，是物理真实存在的；
• 厂商出厂时候就设计好的，比如iPhone6/7/8是750*1334;

---

二、物理像素比/屏幕像素比

• 我们开发的时候，不一定是1px=1个物理像素点；
• 早期的手机屏幕/普通的手机屏幕/PC端页面：1px=1个物理像素点；
• 但是移动端不尽相同（现在的屏幕更加功能强大了，如下要介绍的Retina(视网膜屏幕)）；
• 1px能显示的物理像素点个数，称为物理像素比或者屏幕像素比。

---

三、Retina(视网膜屏幕)

• Retina(视网膜屏幕)：一种显示技术，可以把更多的物理像素点压缩在一块屏幕（1px）中，从而达到更高的分辨率，显示效果更加细腻。（如左图）
• 如下，1px屏幕中不再是1个物理像素点而是4个：
  

---

四 、多倍图

• 应用背景: 比如一张50px×50px的图片在刚刚的手机retina屏幕中打开，按照刚刚的物理像素比(1:4)会放大，会模糊。因为这时候的1px屏幕中能放更多的物理像素点，而原先的50px×50px的每一个物理像素点都被扩大了4倍，而显出更多的模糊点。
• 以上问题解决方法：这时候可以使用一个本身就是200px×200px的图片，去替换原来的图片，设置尺寸的时候还是设置50px×50px；
• 在标准的viewport设置中，使用多倍图来解决上述问题，在高清设备中，图片也可以清晰显示；
• 通常使用二倍图：也就是如果要显示的尺寸是50px×50px，则会使用一个本身为100px × 100px的图片；
• 有时候也有用三、四倍图，具体看开发需求。
• 背景图片注意缩放问题。

/*在iPhone8中，使用二倍图*/
img {
      /*原始图片尺寸100px*100px*/
  width: 50px;
  height: 50px;
}
.box {
      /*原始图片尺寸100px*100px*/
  background-size:50px 50px;
}

---

五、常见多倍图切图格式

• 常见情况，设计师多图切图时，会更改图片命名格式如下：
  

---

下篇继续：【57】移动WEB开发(4)——开发选择常见方案