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

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

目录：
一、物理像素点
二、物理像素比/屏幕像素比
三、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)——开发选择常见方案