响应式排版

Question

我读过不同的关于响应式排版的文章，但没有找到一个好的实践来采用。如果我必须为这些分辨率优化我的webapp，并为图形中的每个人设置字体大小：

320x480 -> 12px

480x800 -> 20px

540x960 -> 26px

720x1280 -> 26px

在我读完之后，我在css文件中放入了这个：

html { font-size: 100%; -webkit-text-size-adjust: 100%; 
                          -ms-text-size-adjust: 100%; }

然后用Ethan Marcotte的公式计算出我的第一个字体大小：

body{font-size: 0.75em;/*12px/16px */}

然后，对于媒体序列，我为html属性增加了font-size：

/* ===== == = === 30em (480px) === = == ===== */
@media only screen and (min-width : 30em) {
   body{font-size: 125%;}/*20px*/
}
/* ===== == = === 37.5em (600px) === = == ===== */
@media only screen and (min-width: 37.5em) {
    body{font-size: 163%;}/*26px*/
}

这是使我的字体适应不同分辨率的好做法吗？你有没有很好的实际例子，我可以在哪里找到这些信息？

提前感谢！

Answer 1

从结构上讲，这就是我要做的。我不确定我是否会在你的mq中使用百分比，但我可能会继续使用em的。