一次搞清楚移动端适用的这些作弊单元的概念设计稿三.rem方案的原理和细节高清屏上，位图处理高清屏上，关于border:1px的处理手机屏幕自动适配处理手机屏幕字体大小的处理1.让作弊单位，不再作弊手机适配本身并不难，但是因为涉及到单位换算，如果要解释手机适配解清楚了，就必须了解每个单元的概念。但是由于中英翻译的问题，我发现很多文章都是讲解移动端适配的。关于单位，我们有一万种翻译方法……“物理像素，逻辑像素，物理分辨率，逻辑分辨率，实际像素，css像素，设备像素，ppi，pt，dpr。”确实给我们这些新手学习移动适配造成了很大的困惑。英语真的很重要。分享一下我认为最靠谱，需要理解的4个概念。推荐记住这4个名词，我觉得翻译的很贴切也很容易理解。物理像素：显示器上最小的物理显示单位。苹果的视网膜屏幕很清晰吧？这是因为它的物理像素高。设备无关像素（density-independentpixel）：这是计算机坐标系中的虚拟概念。这个点代表一个可以被程序使用的虚拟像素（如：css像素）。Devicepixelratio（设备像素比）：也叫dpr。设备像素比=物理像素/设备独立像素。也可以通过window.devicePixelRatio获取设备像素比位图像素：png、jpg、gif都是位图，位图像素是位图的最小数据单位。以iphone6为例，物理像素分辨率：750*1334设备独立像素分辨率：375*667设备像素比：2不管是高清屏还是普通屏，一个11css像素的物理尺寸就是一样的，不同的是每11个css像素有高清屏那么大的地方对应2*2个物理像素，所以很清晰。在普通屏幕上，1个css像素（11）对应1个物理像素（11）在高清屏幕上，1个css像素（11）对应4个物理像素（22）不知道你能不能看懂这个看完这个例子名字的区别。如果你还有点不明白，可以阅读下面的补充说明；如果您已经了解，则可以跳过下一节。关于这4个名称的补充说明：物理像素：物理像素越大，屏幕越清晰。设备无关像素（density-independentpixel）：也叫密度无关像素。这个设备的独立像素和你眼睛看到的手机大小有关。两部手机看起来一样大？那么他们设备的独立像素是相同的。也就是说，我不管你有没有高清屏，有没有高清屏设备。独立像素只与我的设备看起来有多大有关。设备看起来很大？设备无关像素大；设备看起来很小？与设备无关的像素很小。所以我认为是设备无关像素（density-independentpixel）。这个翻译比较贴切，也比较好理解。这只是关于设备的外观尺寸。很多译者也把device-independentpixels称为：logicalpixels,csspixels,actualpixels...2.应该准备什么样的设计稿？首先选择手机的屏幕宽高作为基准（以前iphone4是320×480，现在多是iphone6的375×667）。对于retina屏幕（如：dpr=2），为了达到高清效果，mockup的canvassize会是reference的两倍，也就是说像素数会是原来的四倍（iphone6：原来的375×667变成750×1334）。3、rem方案的原理和细节rem方案的原理：让需要动态变化的布局和图片单元写在rem中。比如width:2rem，那么2rem是多少呢？这个跟根元素html的font-size属性有关。例如，如果字体大小为75px，则2rem表示150px。所以只要html的font-size可以根据屏幕大小和dpr变化动态调整，那么所有以rem为单位的元素都会动态变化。这是rem可以适配的基本原理。至于屏幕尺寸和dpr，可以通过js或者css获取。细节一：在高清屏幕上，位图处理常见的位图，包括png/jpg/gif类型的图片。只有当一个位图像素对应一个物理像素时，位图才会被高质量显示。所以常见的问题是：PNG图片在普通屏幕上显示正常，但是在高清屏幕上，会出现位图像素不足的情况。导致图片模糊。所以其实更好的解决办法是：根据不同的dpr显示不同的位图。另一个是你可以使用矢量图、字体图标，并将它们转换为base64而不是位图。没有位图，自然就没有位图问题。细节二：在高清屏上，border:1px的处理其实并不是所有做手机适配的人都一定会遇到这个问题。比如你的设计师给出了一个基于iPhone6的750*1334的设计稿，其中有一个标注为1px的边框。所以设计师实际想要的是视网膜屏下1px，也就是普通屏下0.5px。但是问题是：并不是所有的手机屏幕都支持0.5px，在ios7或者Android下，可以把0.5解析成0px这里有一个解决方法：setinitial-scale=0.5
