移动开发的设计稿为什么大多数是750px？

宽度750px的设计稿，是iphone的UI设计标准，为什么是这个标准，这与iphone手机的迭代有关，我们可以看到，自iphone6开始到iphone8这过程，它们的屏幕物理像素都是750*1334px，这几代机现在也依然受大家的喜爱，750px的设计标准也慢慢的成为移动端设计的标准。

逻辑像素和物理像素区别

逻辑像素（logic point）：逻辑像素的单位是PT，它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。

物理像素的单位就是我们常说的pixel，简写成PX。它是我们在Photoshop和切图中使用的单位，屏幕设计中最小的单位就是1px不可再分割。使用Photoshop设计移动端界面和网站的设计师使用的单位是PX。在以下的文章中，如果您使用Photoshop设计界面，那么只需要记住所有px单位的数值和支持Photoshop的工具，如果使用Sketch或Adobe XD设计界面，那么只需要记住所有pt单位的数值和对应的工具即可。

750px不是巧合（等比缩放）

750这个数字，不单单是个巧合的数字。我们知道，移动开发是需要进行页面适配的，页面适配当然需要用到rem做单位，我们也知道浏览器默认1rem = 50px；而iphone6/7/8的逻辑像素是375*667pt

得到这些尺寸后，就可以用设计师给750px设计稿进行页面的适配了，首先把750分成7.5份，那么每一份大小就是100px；

同样的，把iphone6/7/8的逻辑像素375*667pt中的宽度375pt等分成7.5份，375 / 7.5 = 50，也就是说设计稿的100px，就等于375pt屏幕的50pt，利用这样一个关系就可以实现等比缩放了。(以下把1pt视为1px来进行计算)

由：750px的每一份大小是100px；375px的每一份是50px。

公式化：设计稿每一份大小 / 设备每一份大小 = 设计稿元素尺寸大小 / 移动端显示寸大小。

假设：在设计稿上的一个元素尺寸是200*200px ，那么他在375pt的屏幕尺寸上显示的大小是多少呢？

令：显示大小为x（x即为移动端显示寸大小）。

因为：设计稿每一份大小 / 设备每一份大小 = 2 （100 / 50 ）；

所以：x = 200 / 2 = 100，即在375px的屏幕尺寸上显示的大小是：100px；

再由：375px默认：1rem = 50px；（在移动端需要用rem进行适配，就需要转换一下单位）

则：1px = 1 / 50 rem，根据公式和单位转换，可以得到：

x = （设计稿元素尺寸大小 * 设备每一份大小） / （设计稿每一份大小*50）；

简化得：x = 设计稿元素尺寸大小 / 100rem；

所以，由上面步骤可得到一个适配375pt逻辑像素的页面了；以后只要看着设计稿的尺寸大小，然后套用上面的公式，就ok了，比如，设计稿元素尺寸宽度是64px，直接套 x = 64 / 100rem；

.box{width:64/100rem;height:64/100rem
}

其他的像素设备，也用同样的比例关系进行等比缩放

媒体查询方式适配：

 @media screen and (max-width: 320px){/*750 / 7.5 = 100320 / 7.5 = 42.67iphone5:*/html{font-size: 42.67px;}}@media screen and (min-width: 375px){/*750 / 7.5 = 100375 / 7.5 = 50iphone6:*/html{font-size: 50px;}}@media screen and (min-width: 414px){/*750 / 7.5 = 100414 / 7.5 = 50iphone6Plus:*/html{font-size: 55.2px;}}

js方式适配

document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";

补充问题：为什么要分成7.5份，分成8份，9份，10份不可以吗？

当然是可以的，分成7.5份主要是因为好计算，750 / 7.5 刚刚好等于100，这就有了最后的 x = 设计稿元素尺寸大小 / 100rem；