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

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

1. px

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

2. em

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

3. rem

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

4. %

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

5. vh和vw

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

   
   

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

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