久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

12
2019/09

如何使用css中的vw和vh

發(fā)布時間:2019-09-12 18:39:58
發(fā)布者:會飛的魚
瀏覽量:
0

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

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

  1. px

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

  2. em

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

  3. rem

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

  4. %

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

  5. vh和vw

    vw和vh是視口單位,視口就是根據(jù)你瀏覽器窗口的大小的單位,不受顯示器分辨率的影響,自適應電腦分辨率。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就實現(xiàn)響應式布局。

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


關鍵詞:
返回列表