前端学习7 CSS单位

css单位主要包含以下几种：px，em，rem，vh，vw，vmax，vmin，下面我们主要介绍这几种单位。

1. px

px表示像素，属于绝对长度单位，1px=1物理像素。

2. em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为16px * 62.5% = 10px。（就不为16px）. 这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了.

3. rem

rem，相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%。

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

4. vh vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。

5. vmin vmax

vmin：当前 vw 和 vh 中较小的一个值(min(vw,vw)* % ) vmax：当前 vw 和 vh 中较大的一个值(max(vw,vw)* % )