响应式排版答案

【问题标题】：responsive typography响应式排版
【发布时间】：2012-07-31 20:17:21
【问题描述】：

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

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

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

提前致谢！！！

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

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

【讨论】：