html - 响应式排版

Question

我已经阅读了不同的关于响应式排版的文章，但还没有找到可以采纳的好的做法。如果我必须针对这些分辨率优化我的网络应用程序，并为图形源中的每个人设置字体大小:

320x480 -> 12 像素

480x800 -> 20 像素

540x960 -> 26 像素

720x1280 -> 26 像素

阅读后，我将此放入 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*/
}

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

提前致谢!!!

Answer 1

从结构上讲，这就是我要做的。不确定我是否会在您的 mq 中使用百分比，但我可能会继续使用 em。这是一个很棒的 px 到 em 计算器:http://pxtoem.com/