为什么设计稿是750px

前一阵子，在研究了物理像素、设备独立像素和css像素以及viewport后，我产生了一个问题，就是为什么我们的UI所给的设计稿是750px。 
　　这里所说的750px并不是绝对的，750px是iphone6的物理像素，也叫屏幕分辨率。所以这里只是泛指移动端设计稿是按照设备的物理像素所给。那先来说一下这几个像素吧。

物理像素： 
　　　　顾名思义，就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候，这个屏幕上有多少个像素点，他的物理像素就是多少； 
　　　　
设备独立像素： 
　　　　　也叫做逻辑像素(对于前端来说，和我们的css像素是一样的)，这个不同的设备是不一样的。在viewport为ideal-viewport模式时， 如iphone6此时的viewport为375px，代表着我们在css中写375px就可以达到全屏的效果；

　　那么这个时候我就有一个问题了，按照这样说，UI的设计稿就应该按照css像素（如ipohone6应该给375px的设计稿）给，这样我们我们量出来直接写不就刚好。但是！！！我们忽略了一个问题！那就是，我们在移动端中会使用rem方案，来做不同设备间的适配，可以实现同一份代码在不同的设备上展示的效果都是合适的。而rem实际上就是做了物理像素和css像素之间的转换。我们先来po一下代码：

(function () {
　　　function changeRootFont() {
　　　   var designWidth = 750, rem2px = 100;
　　　   document.documentElement.style.fontsize = 
　　　  ((window.innerWidth / designWidth) * rem2px) + 'px';
　　　  //iphone6: (375 / 750) * 100 + 'px';
　　　}
　　　changeRootFont();
　　　window.addEventListener('resize', changeRootFont,false);
})();

这段代码不难懂吧，可以看到，我们通过动态的获取设备独立像素，然后除以设计稿的宽度，然后赋给根字体的fontsize，以致来动态改变跟字体大小，做到自适应。但至于为什么要乘100，首先375 / 750是0.5，浏览器默认最小字体为12px，所以我们需要放大一些，而100又很好算，我们只需要将设计稿量出来的长度（px），小数点向左移2位，单位变成rem就好了。你懂了吗~ 
　　所以说，rem相当于为我们做了物理像素与css像素之间的转换。所以设计稿直接给物理像素的就好了。当然，直接给css像素的，我们也可以直接量多少写多少，也能完美适配，但是！这个完美适配只对于一个设备！或者是一类，一类css像素就是375px的设备，显然，这不合适。
======================================

由于iphone是2倍高清屏，直接用750的设计稿上的图片  也可以直接用，显示的更清楚

标签：为什么,750px,像素,rem,设计,物理,css,设备
来源： https://blog.csdn.net/u010227042/article/details/115678606