响应式排版

Question

我已经阅读了很多关于响应式排版的文章，但没有找到一个好的实践方法。如果我要优化我的Web应用程序以适应以下分辨率，并使用图形源中的字体大小：

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属性的字体大小：

/* ===== == = === 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*/
}

这是一种好的做法，可以使您的字体适应不同的分辨率吗？ 您知道哪些好的实践例子，我可以找到这些信息吗？

提前致谢！

- pixlab

Answer 1

从结构上来说，这就是我会做的方式。不过，在你的 mq 中，我不确定是否应该使用百分比，我可能会继续使用 em。这里有一个很棒的 px 到 em 的计算器：http://pxtoem.com/

- Lowkase