1. 程式人生 > >CSS3 的視口單位vw、vh實現自適應(帶有px,em,rem的簡單介紹)

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設定最大最小寬度。