CSS3 的視口單位vw、vh實現自適應(帶有px,em,rem的簡單介紹)
一、px,em,rem,vw的簡單介紹
1、px
px其實就是畫素的意思,全稱pixel,也就是影象的基本取樣單位。對於不同的裝置,它的影象基本單位是不同的,比如顯示器和印表機。而我們通常所說的顯示器解析度是指桌面設定的解析度,不是顯示器的物理解析度,但是現在我們的桌面解析度和物理解析度幾乎是一致的,因為這樣顯示效果最佳。所以總的來說px就是對應我們顯示器的解析度。這樣就會有個問題就是如果使用px的話我們就要根據不同電腦的解析度來做自適應,有點麻煩。
2、em
em是相對長度單位。相對於當前物件內本文的字型尺寸(如果沒有設定本文尺寸,那就是相對於瀏覽器預設的字型尺寸,也就是16px),這樣計算的話。如果沒有設定字型尺寸就是1em = 16px。如果使用em的話,有個好的建議,就是將body的font-size設定成62.5%,也就是16px * 62.5% = 10px。這樣的話1em = 10px,方便我們計算。
3、rem
rem和em一樣也是相對長度單位,但是不一樣的是rem始終都是相對html根元素。這樣有個很大的有點就是使用rem後不會受到物件內文字字型尺寸的影響,而且只需要改變根元素就能改變所有的字型大小。相容性也是不錯的,IE8以上版本和其他瀏覽器都已經支援,是個做響應式頁面的好選擇
4、重點:vw和vh
vw和vh是視口(viewport units)單位,何謂視口,就是根據你瀏覽器視窗的大小的單位,不受顯示器解析度的影響,是不是很神奇,這就代表了,我們不需要顧慮到現在那麼多不同電腦有關解析度的自適應問題。
vw是可視視窗的寬度單位,和百分比有點一樣,1vw = 可視視窗的寬度的百分之一。比如視窗寬度大小是1800px,那麼1vw = 18px。和百分比不一樣的是,vw始終相對於可視視窗的寬度,而百分比和其父元素的寬度有關。
vh就是可視視窗的高度了。
這邊順便提一下vmin和vmax,vmin是指選擇vw和vh中最小的那個,而vmax是選擇最大的那個
相容性方面是vw和vh的短板了,如下圖所示,使用vw和vh所需求的版本還是較高的
二、使用vw,vh能做什麼
1、響應式頁面輕鬆搞定
由於vw,vh的特性,他們能夠根據視窗大小來自動調節字型大小,這就能很輕鬆地完成響應式頁面的佈局
2、小技巧之響應垂直居中
可以使用vw,vh來實現在頁面中響應垂直居中,只需要以下程式碼
#box {
width: 50vw;
height: 50vh;
margin: 25vh auto;
}
只要設定margin的上下間距,使之heigit + margin-top +margin-bottom = 100 ,width + margin-left + margin-right = 100 ,就能夠響應垂直居中
3、模仿bootstrap的柵欄佈局
瞭解過bootstrap的都知道它的柵欄佈局,而使用vw,vh就能夠輕鬆實現。
.col-2 {
float: left;
width: 50vw;
}
.col-4 {
float: left;
width: 25vw;
}
.col-5 {
float: left;
width: 20vw;
}
.col-8 {
float: left;
width: 12.5vw;
}
上面是column例項只要在一行中所有的列加起來等於100vw就實現響應式佈局
總結:
個人認為視口單位是個用來做響應式佈局很不錯的單位,當然如果要使用vw,vh,我的建議是rem結合vw來開發,因為視口單位有個缺點就是它沒有最小或者最大限制,這就達不到我們都時候所希望的一個限制(比如視窗太小了,字都看不清)。所以我們可以在根元素上設定vw和vh,然後在根元素上限制最大最小值,然後配合body設定最大最小寬度。