栅格系统

小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。

　　Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵：

　　可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。

　　上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定为31px，则刚好可以放下18个字后填满558px像素的文本框。

　　当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格为8x8px的话，得到如下一个栅格图：

　　以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。