html 长度vm,02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗?

1:废话不多说,直接看如下图表:

65ad4378303b9dc1675c055f0ccc2ae0.png

2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点;

3:em 为相对单位,一般以 body 内的 font-size 为基准进行定义,默认值 1em = 16px,假如说我们想使用 “1em” = “10px” 来取代默认值 “1em” = “16px”,应写如下代码:

body {

font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/

}

h1 {

font-size: 2.4em; /*2.4em × 10 = 24px */

}

ul{

font-size: 125%; /* 基准变成了20px */

}

li {

font-size: 1.4em; /*1.4 × ? = 14px ? */

}

但是问题来了,由于 “em” 是相对于父级元素讲的,所以加入 ul 不定义基准大小,则下面的 li 将级成原本的默认值 “1em” = “16px”,但是这样换算单位会很麻烦,但是每一个父级元素你都设置基准大小,平白地增加了无穷的代码编辑烦恼,这该怎么办呢?

4:结合上面种种情况,rem 应运而生!!!在 W3C官网 上是这样描述 rem 的——“font size of the root element”。即当设置了 html{ font-size: 62.5%; } 后,此页面的根单位为10px,即不管任何元素 其 1rem 都等于 “10px”.是不是很方便。

5:下面说点高级的,vw vh vm ,简言之,不管是 移动端 Mobile 还是 PC,屏幕宽度均为100vw,屏幕高度均为100vh,有点类似与100%,但是又不同于%,因为%单位也是相对于父级的,而 vw 和 vh 都是相对于整个屏幕;

6:而说 vm 是 vw 和 vh 的补充,即当 屏幕宽 > 屏幕高,以 “屏幕高” 为基准,即 1vm = 1vh;当 屏幕高 > 屏幕宽,以 “屏幕宽” 为基准,即 1vm = 1vw; 2012年9月23号这天的兼容性为:Chrome 20+, IE9+ 以及Safari 6支持!著名的CSS属性可用性查询网站caniuse给出了具体的兼容性表,点击这里查看。

b539f3c59426fa0a4df90b561d0ffcee.png

如果感觉不错,点个赞啊!!!

ec687499db7e8b0e95f845c4bbc96d9a.png

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值