当前位置: 秋叶网络博客 网络技术 ◊ 自适应网页字体大小的设置

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

作者:秋了秋 发表时间: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请详见:自适应网页制作教程

3
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/144.html
目录: 网络技术 | 标签: 自适应, 字体大小 | 21768次阅读