retina屏适配问题

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

设计稿

　　以设计稿750*1334为基准

retina屏精度显示问题

　　retina屏的高清是因为他在同样的宽高下容纳了比其他类型屏幕更多的像素点，这会导致1px问题，明明css声明的是1px，但是因为retin屏像素比是2或者3，所以1px最终被渲染成了2px或者3px

移动端适配问题

　　移动端屏幕宽度有大有小，如何在不同屏幕上显示相同的效果，假如需要一个div充满全屏，在不设定百分比的情况下，如何实现？

rem em px选择

　　rem是根据html根元素的font-size来设定大小，em是根据父元素的font-size来设定大小，px代表的是css像素，在设备像素比为1的时候px还可以对应真实比率为1，如果缩放比为2，那么对应的就是2了，在移动端这三个单位如何选择

解答：

　　先说移动端适配问题

　　　　无retina屏幕的适配：无retina屏幕意味着设备像素比都是1，所以只需要考虑如何让一个div撑满全屏的设定在任意屏幕都可以实现，因为rem代表的长度是根据html根元素的dont-size来设定的，所以我们是否可以根据不同屏幕的大小来设定不同的font-size值，比如在750px的屏幕上设置font-size为100px，这样1rem=100px，所以7.5rem就等于750px，在宽度为375px的屏幕上如果也希望写7.5rem实现全屏，只需要设置font-size为50px就可以了，7.5*50=375px，所以我们在js中获取设备宽度，然后设置documentdocumentEletnt.fontSize = deviceWidth/7.5;

　　　　retina屏幕适配：retina屏幕在于设备像素比是2或者3，这意味这同样1px在实际表现可能是2px或者3px，但幸好这不会影响我们的的font-size的设定规则，所以这块不做改动

　　retina屏精度显示问题：在retina屏幕上一个像素点比普通屏幕多了三个像素点，这会导致两个问题，

　　　　1:1px会有变粗的效果

　　　　2:图片显示精度问题，本来是一个200*200图片，把它放入实际上是400*400的像素区域里，显示肯定会有问题

　　　　对于1px的解决方案是可以设置先设置border为1px，然后通过-webkit-device-pixel-ratio获取设备像素比，如果像素比是3，我们设置元素的大小为正常的三倍，然后通过scale将元素缩小3倍，可得到1px的边框，如果画一条单独的1px的线段，可以设置高度为1px，然后缩小3倍

　　　　对于图片显示精度问题，虽然css上面显示区域是200*200，但是实际像素显示大小为400*400，所以这里我们应该听过400*400的图片，可以在css里面拿到设备像素比，根据不同像素比加载不同大小的图片

　　　　关于rem em px的选择问题：

　　　　　　我们在上面解决移动端适配的时候选择了rem，但是字体要不要使用rem呢，举一个极端例子，我们通过font-size动态设置rem对应的px，如果在一个非常非常狭窄的屏幕上（屏幕宽度为50px），那么1rem=50/7.5=6.6px，当我们在750px的设计稿拿到字体大小是20px的时候，我们也许会把字体大小设置为0.2rem，最终在这个50px的屏幕上我们会看到多大的字体呢，就是0.2*6.6=1.32px，这肯定不是我们希望看到的结果，所以对于字体而言我们使用em来另外控制，通过在body控制body的font-size，达到不同屏幕下协调的字体大小设置：

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}
 
@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}
 
@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}

　　关于canvas绘图在retina屏幕显示精度问题：

　　　　同样canvas使用的css像素单位绘制了图像，本意是希望绘制200*200的图像，但是因为其200*200的图像绘制在了retina400*400的像素区域里面肯定会有问题，这个时候可以放大canvas的绘图区域至二倍，即设置canvas标签的width和height属性为正常的2倍（如果设备像素比为3，则设置为3倍），然后在css里面在设置canvas的宽度为原来大小，比如我们的canvas是想绘制在200*200px的区域内，我们在css里设置canvas为width:200px;height:200px,然后设置<canvas width="400" height="400"></canvas>