# 二倍图

# 物理像素 & 物理像素比

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

# 多倍图

• 对于一张 50px * 50px 的图片，在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
• 在标准 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
• 通常使用二倍图，因为 iPhone6/7/8 的影响，但是现在还存在 3 倍图 4 倍图的情况，这个看实际开发公司需求
• 背景图片 注意缩放问题

1
2
3
4
5
6
7
8

img {
    width: 50px;
    height: 50px;
}

.box {
    background-color: 50px 50px;
}

# 背景缩放 background-size

background-size 属性规定背景图像的尺寸

1

background-size: 背景图片宽度 背景图片高度;

• 单位：长度 | 百分比 | cover | contain;
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
• contain 把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域