css中的單位

標籤：rem   講解   裝置   idt   方法   適配   通過   基於   計算   

今天看到了一個沒見過的單位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差不多

css中的單位