iOS移动开发1x 、2x 、3x图片介绍

1x 、2x 、3x图片介绍

手机屏幕分两种

1. 视网膜屏:
   • 又叫Retain屏幕,就是高清视网膜屏幕,分辨率宽高是标准屏幕分辨率的2倍
2. 非视网膜屏
   • 又叫非Retain屏,是标准分辨率

分辨率

• 概念:分辨率的意思就是把屏幕进行横向、纵向等分,通常描述手机屏幕用点来表示,在retina屏幕下,一个点表示两个像素,在非retina屏幕下,一个点表示一个像素,而像素,就是常说的分辨率,在iPhone6 Plus下,一个点表示3个像素

iPhone手机的分辨率

• 在上图可以看出
  1. iPhone3GS的手机,是非视网膜屏幕,它的点 和 分辨率 是相同的,也就是两者相除 得 1
  2. 在iphone4/4S/5/5C//5S/6,它们都是视网膜屏幕,分辨率正好是点的两倍,相除得2
  3. 而在iPhone6 Plus,虽然也是视网膜屏幕,但是分辨率是点的三倍,也就是相除得3

1x 2x 3x 图片

• 由于不同手机的屏幕的分辨率和它的点的倍数,是不同的,所以我们在实际开发中需要准备多套图片
• 由于目前只存在1倍,2倍,3倍,这几种,所以目前准备的图片就分 1x,2x,3x图,当然由于只有3GS手机才是1x图,而3GS手机,基本上已经无人使用,可能很多公司已经不再去制作1x图片

图片的命名规则:

• 1x图片: 直接使用文件名 btn_left.png
• 2x图片: 在文件名后加上@2x标识 btn_left@2x.png
• 3x图片: 在文件后加上@3x标识 btn_left@3x.png

总结

1. 在同样一个尺寸的屏幕下由于使用的屏幕不一样(retina和非retina),所以造成的屏幕分辨率会不同.也就是说,同样是30*30的像素,在3.5 inch大小的屏幕上,如果是非retina显示会大一些,retina屏幕显示会小一些。
2. 在开发中使用的是点.(比如 30 * 30 ,不是表示30像素,而是表示30点,这样的话iOS系统会自动把点转换为对应的像素)
   • 非retina屏幕1个点表示1像素
   • retian屏幕1个点表示2像素
   • iPhone6 Plus 下1个点表示3像素
3. 因为程序中的是点,iOS系统会自动把点转换为不同的像素去找图片,所以图片对应的也要准备多份不同的图片,
   • @2X:视网膜屏幕,在原来点坐标的大小上乘以2
   • @3X：在原来的坐标的大小上乘以3