em
em 被定义为相对于当前对象内文本的字体大小
有趣的例子
<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div> </body>当我们将body的font-size设为14px的时候，em的计算方式为 父元素的font-size值 14px * 1.2 =16.8px。所以上述情况最内层div的1.2em实际宽度为24.192
需要注意的是 任意浏览器的默认字体高都是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作为单位就行了
EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
rem
rem是CSS3新增的一个相对单位（root em，根em）
它与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
ch and ex
- ch 单位通常被定义为数字0的宽度。
- ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em
vh and vw
- 1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9
px。 - 同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。
vmin and vmax
vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
网友评论