前端设计:让字体大小自由缩放

方法一:仅使用 em

    浏览器默认的字体高度是16px,在未经调整的浏览器里 1em = 16px,也就是说1px = 0.0625em 。所以10px = 0.625em ,12px = 0.75em 。依次类推,可以将px的值直接转化成em。
 

方法二:使用 % 加 em

    1)首先在body在将字体大小设为 62.5%(16px * 62.5% = 10px)。
    2)在需要改变字体大小时,改用em设值。如:12 px = 1.2em (12px = 10px * 1.2),14 px = 1.4em (14px = 10px * 1.4)等等。
    不过,使用第二种方法要注意的是:IE在处理汉字时,对于浮点的取值精度有限,62.5%会比12px的字看起来略微大一点点。只需将 62.5% 改为 63% 即可。
 
    但是,无论是使用上述哪种方法,关于 em 设值的两个特点都是必须注意的:
    1)em 的值并不是固定的; 
    2)em 会继续父级元素的字体大小。如父字体设置为1.4em ,子字体设置为 1.2 em ,那么子字体的实际值是 1.2 *(父字体的实际大小)。
  
    只要注意了em的这个继承属性,就可以使网页中的字体大小按用户需要自由缩放了。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值