一、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設置最大最小寬度。
?

總結

以上是生活随笔為你收集整理的前端学习（381）：CSS3 的视口单位vw、vh实现自适应（带有px，em，rem的简单介绍）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。