二倍图

物理像素比

手机端开发时的 1px 不一定等于1个物理像素（通常是1：2 的关系），那么对于一张 50px * 50px 的图片，在 pc 端可以显示正常，而在手机端将会被放大两倍，导致模糊

解决方法：使用二倍图

1. 使用二倍尺寸大小的图
2. 再将图的宽高缩小一半

手机端即可显示高清正常

背景大小 background-size

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

单位：

• px（指定宽、高）
• 百分比（占父级大小的百分比）
• contain（等比例缩放到父级可以显示的最大尺寸，不得溢出）
• cover（等比例缩放到完全铺满父级的大小，溢出则隐藏）

注意：

• 写单个值表示宽，高则默认 Auto
• 必须写在 background-image 后才生效

二倍精灵图

1. 先用 FW 将精灵图等比例缩小一半
2. 再测量位置
3. background-size 写缩小后精灵图的尺寸