em,rem和vh

概述

  • rem

root emphasize,根元素<html>的font-size

  • vw,vh

vw:屏幕宽度相关,1vw是屏幕宽度的1%
vh:屏幕高度相关,1vh是屏幕高度的1%
vmin,vmax 分别表示两者中较小和较大的部分。

  • em

基准点为父节点的font-size
如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一 个固定的值。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
为 了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  • 三者兼容性
    vh,vw:ie9及其以上、safari5及其以上、android4.4及其以上等。

rem是css3属性,IE9及以上所有浏览器,安卓2.1以上版本,iOS4.0以及以上版本的safari(换句话说,IE6-8不兼容)
em是css2属性

结论

比较得出,em的缺陷较多,不宜使用。
而rem的兼容性比vh/vw稍好一些。


转载于:https://my.oschina.net/u/2460148/blog/650295

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值