css中的单位

今天看到了一个没见过的单位vw,就顺便把css中我常用的单位讲解一下；

1.px

px:像素，这个单位想必大家都很熟悉，就是计算机上的一个点，我也不多说什么了。

2.em

em是相对于其父元素的字体大小，如果没有父元素，则是相对于body元素，即1em是当前元素大小的1倍，2em是2倍。

<div style="font-size:12" >

　　<p style="font-size:12">12px大小</p>

　　<p style="font-size:1em">1em大小</p>　　　　 ==>两个p的字体大小是一样的

</div>

3.rem

rem是相对于根元素的大小，即html元素，rem一般用来做移动端的适配，我们可以有两种方法来使用rem

1.在css中给html元素设置fong-size大小为625%，然后再取得设计图中的像素大小后，在除以100就是rem的值；

<style>
　　html{
　　　　font-size: 625%;
　　}
</style>

<div style="font-size: 100;">
<p style="font-size: 100px;">硕大的</p>
<p style="font-size: 1rem;">硕大的</p>
</div>

2.是根据设计图的大小，通过js设置根元素的font-size

document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + "px";

其中6.4是根据设计图的横向大小决定的，若是基于ipone7的设计稿，那就是除以7.5，之后取得设计图的像素大小后，除以100就是rem的值。

4.vw

vw视口宽度，也是用来做移动端的弹性布局的单位，但基本上用不到，我也是今天才看到有这个。其原理是设备将视口平均分为100单位的vw

在pc的可视区是1280px，那1vw就是12.8px，所以说，在做移动端布局时，根据设计图宽度，若是750px，则将取得的像素大小乘以100在除以750，即直接除以7.5，得到的就是vw的值，用法和rem差不多