移动设备分辨率

为什么模拟器下iP6的分辨率为375*667而设计图一般给750*1334？

PPI：每英寸内有多少物理像素点（设备像素点），就是像素密度。标准PPI(160)：1个设备像素 对应1个css像素，放大：1个css像素 对应多个设备像素，缩小：1个设备像素 对应多个css像素。

PPI计算方法

设备像素(物理像素)：一个设备像素是显示器上最小的物理显示单元，每台设备的设备像素都有自己的颜色值和亮度值，大小是固定的，是不可变的；但也因为不同设备的设备像素大小不同，所以导致PPI不同。

css像素：css像素是web编程的概念，用于逻辑上衡量像素的单位，也就是我们做网页时用到的像素，是抽象的，不是实际存在的。

设备独立像素：计算机坐标系统中的一个点，它代表可以由程序使用的虚拟像素（比如:css像素），然后由相关系统转化为物理像素，虽然设备独立像素可以被拉长或者被压缩，但不同设备上的正常独立设备像素大小相同。

设备像素比(dpr)：它是由  这台设备的PPI／160(标准PPI)  得到的，然后也等于设备像素(物理像素)/设备独立像素，设备像素比就是 设备像素(物理像素)与设备独立像素的转换关系值，因为设备像素(物理像素)是固定的，那么设备像素比就决定了设备独立像素的大小，我们可以通过js中window.devicePixelRatio来获取设备像素比，也可以通过css中-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询。

在标准普通屏PPI（160）下，设备像素比为1:1，1个设备像素(物理像素)对应1个css像素。

位图像素：一个位图像素是栅格图像（如:jpg,png,gif等）最小的数据单元，每一个位图像素包含着自身的显示信息（如显示位置，颜色值，透明度）

flexible做了什么事情：它会根据不同设备给html添加不同的data-dpr值，font-size值，标签。我们再用rem为单位来设置大小，rem是根据html的font-size值做相应计算的，从而实现适配效果。它只对ios设备进行判断，安卓始终认为dpr为1。font-size值它是如何确定的呢？目前Flexible会将视觉稿分成100份(为了以后更好兼容vh和vw)，每一份被称为一个单位a，同时1rem单位被认定为10a，(iphone6下)那么750px＝10rem，1rem = 75px，于是将html的font-size设为75px。它这样做效果？动态设置html的font-size与rem结合完成了前端不同大小屏幕的适配；根据dpr动态设置标签是考虑到retina屏幕，我们采用750*1334设计稿设计时就已经完成了对iphone6(dpr=2)的高清自适应适配(我们的css像素实际用到了750，只不过缩小到了375，这就实现了高清,高清的概念有两个：1个设备像素对应1个css像素，PPI密度越高越好)。

图片怎么适配高清？我们把div容器用两倍的css设备独立像素再进行缩放0.5使dpr为2的手机屏幕下 1个设备像素对应1个css像素 达到高清，图片有位图像素，若容器50*100，那么图片原图大小需要100*200，然后img标签的话直接给img设置width:50px;height:100px；background-image的话设置background-size：contain即可。但在普通屏幕下有缺点1、下载2倍图片浪费资源；2、图片由于downsampling，会失去了一些锐利度(或是色差)。解决方案：准备两套不同尺寸图片，不同dpr下加载不同尺寸图片这需要我们自己根据dpr去适配，不同drp下的font-size大小不同，我们只需要上传一张@2的图片到服务器，一般好的服务器是可以缩略图片的  如_50w_100h 。

border: 1px：在iphone的retina屏幕下，写border: 1px solid #ccc并没问题，本身会经过flexible的缩小达到0.5。但安卓是没有0.5的，最简单的hack：

我们如果写border-bottom:1px solid #ddd;，然后通过transform:scaleY(.5)缩小0.5倍来达到0.5px的效果，但是这样hack实在是不够通用(如：圆角等)，写起来也麻烦

字体大小问题：对于页面区块的宽高我们可以对应高清视觉稿，应为视觉稿本来就x2了，对于字体怎么办？我们希望在不同屏幕下看到的文本字号是相同的（不希望在retina屏幕下文本变小），另外在大屏手机上看到更多文本。字体不能用rem，误差太大，且不能满足任何屏幕，我们可以用sass写一个mixin通过@media媒体查询dpr设置不同字体大小  可以让任何屏幕上字体大小统一。为什么字体用rem大小会误差大，字体大小由行高和内容区域高度决定，内容区域高度和字号字体有关，在simsum(宋体)下，内容区域高度=文字大小值，我们按在750*1334下的字体font-size设计，dpr=2下对font-size缩小一倍，会导致在retina屏幕下字体看起来小（具体不清楚）。

理解一下：750的设备像素被分成100份，每10份＝1rem＝75px，我们写的px会被换算成rem，这里的750px为设备像素，但我们写的css像素其实的确是375px，但flex会判断出我们的dpr把我们的里的参数值写成1/dpr，把我们写的css像素进行缩放成1/dpr，在普通屏幕下字体正常的但在retina屏下会缩小，所以我们写750px也刚好被缩放成375px，所以我们在拿到data-dpr后还要对字体做适配，或者直接用750设计稿里的px不进行转换rem（那么与750px的画布分配无关，）

retina屏幕：普通屏幕下(PPI=160,dpr=1:1)，1个css像素 对应1个物理像素(1:1)；retina屏幕下(像iphone6 dpr为2:1时)，1个css像素 对应4个物理像素(1:4)，不同屏幕下，css像素所呈现的大小是一定的，不同的是1个css像素所对应物理像素个数。Ipone6的retina屏幕下，1个设备独立像素对应4个物理像素，由于单个设备独立像素不能分割只能就近取色从而导致图片模糊，所以对于我们20*30的容器最好用40*60的的图片，设计师给出的尺寸1334*750是因为考虑到iphone6的设备像素(物理像素)是1334*750，而它的独立设备像素是667*375。

所以在开发的时候都要按 设计图纸尺寸/2，另外，一个pt容纳2个px已经是人眼视网膜分辨极限，再多人眼也识别不出了。

问题？我们在设备独立像素375*667，设备像素(物理像素)(750*1334) 里做到高清是把与元素方块的设备独立像素按750*1334的高清稿进行设计，然后再把他缩小0.5倍，让750*1334的设备独立像素显示在375*667的原设备独立像素里，使它的 设备独立像素：设备像素＝1:1，但我们用到rem，你在html设置的font-size为画布的1/10，也是1rem，那么rem都是相对于画布的，你在750*1334里设置的120*100的元素大小在375*667里不就是60*50？那么rem用法与高清时需要将120*100的缩小一倍放在375*667的60*50的意愿不是违背了吗？不是的，你用750*1334进行设置时，10rem＝全屏＝750px，那么1rem=75px，html的font-size也会设置成75px，也就是说我们的画布是750px的，然后把它放在大小为原设备独立像素375*667的方框里，我们的页面大小仍是750*1334px（缩小后的设备独立像素），只不过缩小在了375*667px（原设备独立像素）的方框里。rem的作用只是为了适配不同屏幕大小，画布大小我们是根据dpr进行决定是否缩放，也根据dpr进行计算html的font-size。