自适应网页字体大小的设置

作者：秋了秋发表时间：2014年10月16日

制作自适应网页首先需要全局设置字体大小，比如在body{}中添加font-size:14px;

body之内的字体全部用em大小表示，不可再用px，否则自适应制作失败！若在body中加入的是font-size:14px;那么后续的1em=14px，就是以14px来做倍数的基数。则2em=24px，1.5em=21px。

拿实例来表示会更容易一些，例如：

<body style="font-size:14px;">

    <div id="www" style="font-size:2em;">

        <div id="ww" style="font-size:20px;">

              <div id="w" style="font-size:1em;">

              </div>

        </div>

   </div>

</body>

#www的2em就是28px，#w的1em就是20px。综上所述，em的具体值是受它的父级元素px的影响。如果使用rem单位的话就不受父级元素的影响，而是永远以body的字体大小为基数。在自适应网页中，如果元素块默认的字体大小用px表示的话，在引入@media screen的时候无论怎么设置字体大小都不会变化的，唯有默认大小用em表示的时候，在引入@media screen的时候才可变换字体的大小。关于如何设置自适应网页和引入@media screen请详见：自适应网页制作教程

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/144.html

目录: 网络技术标签: 自适应,字体大小 24781次阅读