小屏幕上，一些桌面端無關(guān)大雅的間距不等問題會(huì)變得突出。

　　Lofter是網(wǎng)易一款精品優(yōu)雅的App，但其文章正文界面卻略有瑕疵：

　　可以看到段落右側(cè)與卡片的間距明顯大于左側(cè)。造成這個(gè)問題的原因是設(shè)計(jì)時(shí)對(duì)文本框的寬度與文字大小之間在關(guān)系考慮不周全，導(dǎo)致文字并不能完美地填充滿文本框。

　　上圖為iPhone5中此界面的放大效果并加上了輔助線，仔細(xì)觀察，去除黃色部分各20px的間距后，文本框?qū)挾仁?58px，而正文使用的字號(hào)是30px，所以行末留下18px的空余空間。如果字號(hào)定為31px，則剛好可以放下18個(gè)字后填滿558px像素的文本框。

　　當(dāng)然31px的字號(hào)在實(shí)際環(huán)境中可能并不是一個(gè)最合理的字號(hào)設(shè)定，因?yàn)樗⒉荒鼙徽褂玫紷1x的iOS開發(fā)環(huán)境。在實(shí)際設(shè)計(jì)中，可以先設(shè)定一個(gè)柵格系統(tǒng)，以iPhone5為例，定義最小柵格為8x8px的話，得到如下一個(gè)柵格圖：

　　以8為基本單位，把所有字號(hào)、文本框?qū)挾仍O(shè)定為8的倍數(shù)，這樣我們就可以確保漢字始終保持對(duì)齊。