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>