H5做页面，设计师切图给我2x和3x两个版本，应该用哪个呢

Question

---

H5做页面，设计师切图给我2x和3x两个版本，应该用哪个呢

Answer 1

因为h5做移动端界面，我们都会用rem单位，我个人是切@2x的图片，如果img放在html页面里，我们只要去设置其图片的宽高即可，因为它自己就会自动缩放。但放在css里做背景图的话要用background-size：50%；缩小一半。这样的话在手机上看也不会模糊失真。至于@3x我个人也用同样的方法试过，发现跟@2x差别不大，至少在手机上看不出模糊。
所以个人建议，@2x会好点，图片小，又可以看着不模糊~

Answer 2

2x是双倍图，3x是三倍图，使用哪一个主要看设备的dpi是多少。

不过，一般的页面2x的图就够用了。

如果有兴趣的话，可以通过懒加载等方式根据设备dpi加载不同x版本的图片。

Answer 3

一般iPhone x用3x的图片，其他都是2x的

Answer 4

手机端2X就够，pad要说应该换成3X的，不过要做适配，我们都是直接用3X的，懒得做适配。

Answer 5

2x的就可以了，也就是iphone6的尺寸

Answer 6

1. 随便，都按手机端来做，2x就除以2，3x就除以3。
2. 图标尽量用矢量的，其它能用 CSS 的就不要切图