移动端页面尺寸之一倍图二倍图三倍图

一倍图：设计稿320px原名.png。

二倍图：设计稿640px原名@2x.png

三倍图：设计稿750px原名@3x.png

设置最大宽度最小宽度：父盒子要设置max-width min-width

给盒子设置最大宽度与最小宽度就是为了解决移动端自适应问题

设计稿为二倍图时：

给父盒子设置最大宽度最小宽度

当子盒子设为固定定位的时候 因为定位元素参考的是视口的位置 所以我们需要给子盒子设置一个最大宽度与最小宽度 防止乱跑

什么是二倍图三倍图

比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工（美术工程师）要三个文件：

一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。

一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如sample@2x.png。

一个是90px*90px的PNG图片，这个要用原名@3x来命名，例如sample@3x.png。

这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS统一识别为sample.png，用的时候只需要[UIImage imageNamed:@"sample"]就行了。

那么讲一下应用场景。

1x的图标用于1:1的屏幕，非视网膜屏，例如iPhone 3GS、（/*20140414DEL*/ //早期iPhone 4、感谢 @池谷涌 指正）非视网膜屏的众多iPad等。

2x的图标用于1:2的屏幕，大部分视网膜屏，机型如（/*20140414ADD*/ iPhone 4、）iPhone 4S、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。

3x的图标目前应用于1:3的屏幕，即iPhone 6Plus，这个就比较特殊了，因为苹果为了方便开发者，想出来一个简便的实现方案，将2208*1242分辨率的图像压缩输出在1920*1080的屏幕上。

像素:英文名叫px

像素是构成图像最基本的点，平时说的像素多少也就是这些点的多少。而分辨率就是构成图像的点的排列方式。比如说一张照片的分辨率1600*1200，就表示这个照片上一共有1600*1200=192万个像素，每个横道有1600个像素，每个竖道有1200个像素

分辨率

说手机分辨率是1334×750代表，纵向有1334像素，横向有750像素

---