一直习惯了做WEB设计，当接手到移动端设计的时候，在尺寸问题和文字大小等问题上纠结了老长时间。花了一段时间终于整明白其中的道道，感觉有必要再这里给大家分享一下我的小经小方法。
首先我们列举一些APP常见的尺寸。安卓的分辨率尤其多。480×800, 480×854, 540×960, 720×1280, 1080×1920等。IOS的40×960, 640×1136, 750×1334, 1242×2208。虽然尺寸非常多，我们大多设计的时候按照640*1136的尺寸来设计，当然其他尺寸也可以，做最后做出来的HTML都可以适应不同分辨率的手机。
 

其次我们后期制作HTML的时候用的是单位rem.按照100的倍数算的，在设计的时候我们可以首先把APP的分辨率设置为300，然后ctrl+”调出来表格线。后期制作的时候真的是方便很多。字体大小等都不用换算。
 

移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。
以iPhone 5s为例，屏幕的分辨率是640×1136，倍率是2。浏览器会认为屏幕的分辨率是320×568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。根据像素密度，按相应倍率缩放。就像我们运用rem这个单位，加一段js代码，就会变得简单起来。
移动端设计比PC端的复杂，关键就是倍率（）。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。

友善工作室   供稿