我已经阅读了很多关于响应式排版的文章,但没有找到一个好的实践方法。如果我要优化我的Web应用程序以适应以下分辨率,并使用图形源中的字体大小:
320x480 -> 12px 480x800 -> 20px 540x960 -> 26px 720x1280 -> 26px
在阅读后,我已在CSS文件中添加了以下内容:
这是一种好的做法,可以使您的字体适应不同的分辨率吗? 您知道哪些好的实践例子,我可以找到这些信息吗?
提前致谢!
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*/
}
这是一种好的做法,可以使您的字体适应不同的分辨率吗? 您知道哪些好的实践例子,我可以找到这些信息吗?
提前致谢!