在移動端開發過程當中，由于設備的尺寸不同，我們通過常會指定一些特殊的單位來適應。比如rem、em、vw和v，對于寫移動端的小伙伴們來說rem和em都相對熟悉，今天文匯軟件小編給大家詳細講下vw和vh的使用。

首先我們先大體講下常用單位的簡單介紹。

1. px

   像素作為我們平時最常用的單位，它指的是單位面積內的圖像分辨率的基本單位。而像我們平時的各種設備端值得是物理分辨率。由于我們做移動端時，各種設備的尺寸不同，導致    我們需要寫各種不同的自適應相對較為麻煩，通常不推薦使用。

2. em

   em是字體單位，值得是以瀏覽器默認字體大小為依據的單位，通常來說默認的為16像素，當然我們也可以在css中先預設body的字體大小。

3. rem

   rem是相對于根元素的單位，也是現在寫移動端最流行的寫法，但是需要先引入或者自己預設，兼容性也相對不錯

4. %

   移動端也可以使用百分比來寫網頁，但是他是相對于父元素的單位，如果父元素比較小的話，再用百分比，通常頁面在大屏看上去效果會很差，影響瀏覽，不建議使用。

5. vh和vw

   vw和vh是視口單位，視口就是根據你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，自適應電腦分辨率。vw是可視窗口的寬度單位，和百分比有點一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1200px，那么1vw = 12px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關。vh就是可視窗口的高度了。這邊順便提一下vmin和vmax，vmin是指選擇vw和vh中最小的那個，而vmax是選擇最大的那個。在使用vh和vw中，vmin和vmax在適應字體方面有著極大的作用。

   
   

上圖中，就是利用的vh的特性讓元素上下居中，即heigit + margin-top +margin-bottom = 100 ，就能夠響應垂直居中，寬度也是，通常，只要在一行中所有的列加起來等于100vw就實現響應式布局。

好了，今天就是小編為大家分享的內容，如果您喜歡小編分享的內容的話，就來文匯軟件關注小編更多的文章吧。