3.二倍图

3.1 物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真是存在的。这是厂商在出厂时就设置好的。
• 我们开发的时候1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端不一样
• 1个px的能显示的物理像素点的个数，就是物理像素比或屏幕像素比

物理像素就是我们常说的分辨率

视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更多的分辨率，提高了屏幕显示的细腻程度

3.2 多倍图

• 对于一张50*50px的图片，在手机retna屏中打开，按照物理像素比会放大倍数，造成图片模糊
• 在标准的viewport设置中，使用倍图来提高拖质量，解决在高清设备中的模糊问题
• 通常使用二倍图，看实际需求
• 背景图片 注意缩放问题

所以，我们准备一个图片比我们实际需要的大2倍，这种方式就是二倍图

3.3背景缩放（background-size）

background-size： 背景图片宽度 背景图片高度； 

• 只写一个参数，肯定是宽度，高度被省略，会等比缩放
• 里面的单位可以跟百分比，相对与父盒子
• 单位： 长度|百分比|cover|contain
• cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域
• contain把图像扩展至最大尺寸，使宽度和高度完全适应内容区域
• contain 等比例拉伸，可能会有空白区域