一、px，em，rem，vw的簡單介紹

1、px

px其實(shí)就是像素的意思，全稱pixel，也就是圖像的基本采樣單位。對(duì)于不同的設(shè)備，它的圖像基本單位是不同的，比如顯示器和打印機(jī)。而我們通常所說的顯示器分辨率是指桌面設(shè)定的分辨率，不是顯示器的物理分辨率，但是現(xiàn)在我們的桌面分辨率和物理分辨率幾乎是一致的，因?yàn)檫@樣顯示效果最佳。所以總的來說px就是對(duì)應(yīng)我們顯示器的分辨率。這樣就會(huì)有個(gè)問題就是如果使用px的話我們就要根據(jù)不同電腦的分辨率來做自適應(yīng)，有點(diǎn)麻煩。

2、em

em是相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)本文的字體尺寸(如果沒有設(shè)置本文尺寸，那就是相對(duì)于瀏覽器默認(rèn)的字體尺寸，也就是16px)，這樣計(jì)算的話。如果沒有設(shè)置字體尺寸就是1em = 16px。如果使用em的話，有個(gè)好的建議，就是將body的font-size設(shè)置成62.5%，也就是16px * 62.5% = 10px。這樣的話1em = 10px，方便我們計(jì)算。

3、rem

rem和em一樣也是相對(duì)長度單位，但是不一樣的是rem始終都是相對(duì)html根元素。這樣有個(gè)很大的有點(diǎn)就是使用rem后不會(huì)受到對(duì)象內(nèi)文本字體尺寸的影響，而且只需要改變根元素就能改變所有的字體大小。兼容性也是不錯(cuò)的，IE8以上版本和其他瀏覽器都已經(jīng)支持，是個(gè)做響應(yīng)式頁面的好選擇

4、重點(diǎn)：vw和vh

vw和vh是視口(viewport units)單位，何謂視口，就是根據(jù)你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現(xiàn)在那么多不同電腦有關(guān)分辨率的自適應(yīng)問題。

vw是可視窗口的寬度單位，和百分比有點(diǎn)一樣，1vw = 可視窗口的寬度的百分之一。比如窗口寬度大小是1800px，那么1vw = 18px。和百分比不一樣的是，vw始終相對(duì)于可視窗口的寬度，而百分比和其父元素的寬度有關(guān)。

vh就是可視窗口的高度了。

這邊順便提一下vmin和vmax，vmin是指選擇vw和vh中最小的那個(gè)，而vmax是選擇最大的那個(gè)

兼容性方面是vw和vh的短板了，如下圖所示，使用vw和vh所需求的版本還是較高的

二、使用vw，vh能做什么

1、響應(yīng)式頁面輕松搞定

由于vw，vh的特性，他們能夠根據(jù)窗口大小來自動(dòng)調(diào)節(jié)字體大小，這就能很輕松地完成響應(yīng)式頁面的布局

2、小技巧之響應(yīng)垂直居中

可以使用vw，vh來實(shí)現(xiàn)在頁面中響應(yīng)垂直居中，只需要以下代碼：#box?{

width:?50vw;

height:?50vh;

margin:?25vh?auto;

}

只要設(shè)置margin的上下間距，使之heigit + margin-top +margin-bottom = 100 ，width + margin-left + margin-right = 100 ，就能夠響應(yīng)垂直居中。

3、模仿bootstrap的柵欄布局

了解過bootstrap的都知道它的柵欄布局，而使用vw，vh就能夠輕松實(shí)現(xiàn)。.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實(shí)例只要在一行中所有的列加起來等于100vw就實(shí)現(xiàn)響應(yīng)式布局。

總結(jié)：

個(gè)人認(rèn)為視口單位是個(gè)用來做響應(yīng)式布局很不錯(cuò)的單位，當(dāng)然如果要使用vw，vh，我的建議是rem結(jié)合vw來開發(fā)，因?yàn)橐暱趩挝挥袀€(gè)缺點(diǎn)就是它沒有最小或者最大限制，這就達(dá)不到我們都時(shí)候所希望的一個(gè)限制(比如窗口太小了，字都看不清)。所以我們可以在根元素上設(shè)置vw和vh，然后在根元素上限制最大最小值，然后配合body設(shè)置最大最小寬度。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。