写在前面
天气不错，风景不错，人也不错。日常生活的情趣则是人间烟火。
安心在家呆着，不再焦虑、惆怅，静候佳音。
该有的仪式感还是要有的。
PC端中的图片直接放到移动端显示不清晰
图片在PC端显示正常，同样的图片，直接放到移动端页面时，会出现模糊的状态，图片显示不清楚。为什么同样尺寸的图片在PC端和移动端清晰度不同，这里涉及的问题的是物理像素比，物理像素比就涉及到多倍图了。
物理像素比
一般的在我们写代码中，我们通常都是使用px为单位的，px是像素的意思。
物理像素：1px就是一个物理像素。移动设备中的屏幕分辨率就是物理像素。一个物理像素就是一个正方形的格子，这些格子放到一起就成像我们看到的各种图和文字等元素。在Photoshop中，把画布放大到一定的程度会出现一个一个的透明的正方形的格子，一个格子就是1px。
物理像素比：1px等于几个物理像素，就是物理像素比。
如果1px不等于一个物理像素了，就出现了物理像素比的概念。当1px等于两个物理像素，物理像素比就是2，此时我们就需要二倍图。通常不同的移动设备，它的屏幕分辨率是不同的，屏幕分辨率不同物理像素比一般也就不同，所以就出现了多倍图。
以iPhone 6/7/8 为例
在iPhone6/7/8中，1px等于两个物理像素，所以它的页面中图片需要二倍图来显示
多倍图
个人简单理解来说就是，为了使图片在移动端中正常清晰的显示，图片的格式。
叫多倍图的原因就是不同的移动设备屏幕分辨率不同。比如说：二倍图、三倍图、四倍图等，这些就是多倍图。这里介绍一下二倍图，其他的多倍图都是同样的原理。
二倍图
看一下直接使用图片和使用二倍图呈现的图片的清晰度。上面的是直接使用50px * 50px的图片直接丢到移动端页面的，下面的图片是使用了100px * 100px的图片，进行压缩通过二倍图方式显示的图片。可以很明显的看出第一张图的边缘有锯齿状，相比之下第二张图则清晰了很多。这就是多倍图的效果。
二倍图的实现
需要一张 100px * 100px的图片显示在移动端
1. 准备一个大图；100px * 100px
2. 手动压缩成大图的一半；设置图片的大小为 50px * 50px
因为IPhone6/7/8的物理像素比是2 ， 1px(PC端) = 2个物理像素(移动端的2px)，当我们收动压缩为图的一半时，在移动端页面显示的则是原图的大小。如果不压缩的话，就相当于100px*100px的图片放大成200px*200px的图在移动端显示，所以图片会模糊。
看下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端倍图问题</title>
<style>
div {
width: 50px;
height: 50px;
margin-top: 10px;
}
div:nth-child(1) {
background: url(apple50.jpg) no-repeat;
}
div:nth-child(2) {
background: url(apple100.jpg) no-repeat;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
精灵图的二倍图
1. 在PS中，手动把精灵图缩小原来的一半，测量图片的偏移量；
2. 在代码中，手动把精灵图的尺寸(background-size)缩小为原来的一半；只需要设置宽度，高度设为auto让它自适应。
这里我暂时没有精灵图，就只放上了具体的实现步骤，还是很好理解的，可以自己做一下试试。
ok，多倍图结束了。
991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
