在移動(dòng)端開(kāi)發(fā)過(guò)程當(dāng)中，由于設(shè)備的尺寸不同，我們通過(guò)常會(huì)指定一些特殊的單位來(lái)適應(yīng)。比如rem、em、vw和v，對(duì)于寫(xiě)移動(dòng)端的小伙伴們來(lái)說(shuō)rem和em都相對(duì)熟悉，今天文匯軟件小編給大家詳細(xì)講下vw和vh的使用。
首先我們先大體講下常用單位的簡(jiǎn)單介紹。
px
像素作為我們平時(shí)最常用的單位，它指的是單位面積內(nèi)的圖像分辨率的基本單位。而像我們平時(shí)的各種設(shè)備端值得是物理分辨率。由于我們做移動(dòng)端時(shí)，各種設(shè)備的尺寸不同，導(dǎo)致 我們需要寫(xiě)各種不同的自適應(yīng)相對(duì)較為麻煩，通常不推薦使用。
em
em是字體單位，值得是以瀏覽器默認(rèn)字體大小為依據(jù)的單位，通常來(lái)說(shuō)默認(rèn)的為16像素，當(dāng)然我們也可以在css中先預(yù)設(shè)body的字體大小。
rem
rem是相對(duì)于根元素的單位，也是現(xiàn)在寫(xiě)移動(dòng)端最流行的寫(xiě)法，但是需要先引入或者自己預(yù)設(shè)，兼容性也相對(duì)不錯(cuò)
%
移動(dòng)端也可以使用百分比來(lái)寫(xiě)網(wǎng)頁(yè)，但是他是相對(duì)于父元素的單位，如果父元素比較小的話，再用百分比，通常頁(yè)面在大屏看上去效果會(huì)很差，影響瀏覽，不建議使用。
vh和vw
vw和vh是視口單位，視口就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，自適應(yīng)電腦分辨率。vw是可視窗口的寬度單位，和百分比有點(diǎn)一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1200px，那么1vw = 12px。和百分比不一樣的是，vw始終相對(duì)于可視窗口的寬度，而百分比和其父元素的寬度有關(guān)。vh就是可視窗口的高度了。這邊順便提一下vmin和vmax，vmin是指選擇vw和vh中最小的那個(gè)，而vmax是選擇最大的那個(gè)。在使用vh和vw中，vmin和vmax在適應(yīng)字體方面有著極大的作用。
上圖中，就是利用的vh的特性讓元素上下居中，即heigit + margin-top +margin-bottom = 100 ，就能夠響應(yīng)垂直居中，寬度也是，通常，只要在一行中所有的列加起來(lái)等于100vw就實(shí)現(xiàn)響應(yīng)式布局。
好了，今天就是小編為大家分享的內(nèi)容，如果您喜歡小編分享的內(nèi)容的話，就來(lái)文匯軟件關(guān)注小編更多的文章吧。
