H5适配

上篇谈到了一些基础概念：屏幕密度、逻辑像素什么的，接下来继续探讨 常见设备尺寸 更全的数据请参考 Google 统计 说明：图中的 iPhone 6 Plus 数据看起来有些蹊跷，414 x 736 * 3 = 1242 x 2208，而物理像素却是 1080 x 1920 ，这是为何？实际上 iPhone 6 Plus 渲染出的图片尺寸为 1242 x 2208 px，但屏幕只有 1080 x 1920 px，所以系统会对渲染出的图进行压缩。 附：iOS对欢迎页的 尺寸说明 从表中数据可以看出： 虽然物理像素各种各样，但是逻辑像素还是相对统一的。 逻辑像素相接近的，屏幕尺寸也比较接近。 实际上，逻辑像素就是为了使 UI 在不同的屏幕上的表现一致。即：相同单位的逻辑像素，在不同的屏幕上的物理尺寸相同。来张图吧，一图胜前言。 UI 元素的高度为200逻辑像素，在倍率为1的屏幕上，高度为200 px，在倍率为2的屏幕上，高度为400px；但他们的物理尺寸都是一样的。 说了这么多，该切入正题了！ 如何适配 前面做了很多铺垫，逻辑像素、倍率等等，是时候展现他们的用武之地咯 为不同倍率的屏幕提供对应的图片资源 iOS 平台的 @2X , @3X Android 平台的 drawable-mdpi , drawable-hdpi , drawable-xhdpi , drawable

前两篇更多的是理论部分，这篇主要是实践。 身为攻城狮的你，是否曾想过：如果设计师能按逻辑像素来标注，是多么美好！可现实是，你不得不拿着标注再除个 2 或 3 身为设计师的你，是否曾想过：攻城狮实现的 UI 能够和同设计稿一样，可现实是，你不得不忍受着，某些地方差几个像素或次像素 本篇可能不能解决所有问题，但希望能解决一部分问题 关于倍率的思考 前两篇谈到了逻辑像素和倍率，当 UI 元素的长度单位为逻辑像素时，系统在渲染时会根据倍率自动换算成物理像素。 正因为如此，攻城狮写布局文件时用逻辑像素为单位。攻城狮就想了：如果设计师给的标注是以逻辑像素为单位的，想必是极好的。设计师就想了，如果以逻辑像素标注是方便了你，可是对我有好处没？ 答案是有的，大大的有！比如快速切出 2X，3X 的资源等等。那么问题来了，该怎么做？ How to 本文以 photoshop 为例。 photoshop 里默认点/派 卡大小为 72 点 / 英寸，而新建文档时，设置分辨率为 72 像素 / 英寸（这也是默认值），那么在该文档上 1 英寸上有 72 个点、1 英寸上有 72 个像素，即 1 点 = 1 像素。如果改变分辨率会怎么样？我们试试。将分辨率设置为 216，此时文档上 1英寸还是 72 个点，但是 1英寸上有 216 个像素， 即 1 点 = 3 像素。回忆下，前面已经讨论到：当倍率为 1 时，1