4

我已经阅读了有关响应式排版的不同文章，但没有找到可以采用的良好做法。如果我必须为这些分辨率优化我的 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*/
}

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

提前致谢！！！

4

1 回答 1

1

Structurally, that is how I would do it. Not sure I would use percentages though in your mq's, I would probably continue on with em's. Here is a great px to em calculator: http://pxtoem.com/

于 2012-08-02T17:41:59.897 回答