這篇文章主要介紹了css3新單位vw、vh的使用教程，本文通過實例代碼給大家介紹vw、vh、vmin、vmax 的含義及vw、vh與%百分比的區(qū)別，感興趣的朋友一起看看吧

響應(yīng)式布局的單位我們第一時間會想到通過rem單位來實現(xiàn)適配，但是它還需要內(nèi)嵌一段腳本去動態(tài)計算跟元素大小。

比如：

(function?(doc,?win)?{
??let?docEl?=?doc.documentElement
??let?resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize'
??let?recalc?=?function?()?{
????var?clientWidth?=?docEl.clientWidth
????if?(!clientWidth)?return
????docEl.style.fontSize?=?14?*?(clientWidth?/?320)?+?'px'
??}
??if?(!doc.addEventListener)?return
??win.addEventListener(resizeEvt,?recalc,?false)
??doc.addEventListener('DOMContentLoaded',?recalc,?false)
})(document,?window)

那有沒有一個單位不需要JS和CSS耦合在一起的單位？答案是有的，就是vw／vh。

vw?=?view?width
vh?=?view?height

這兩個單位是CSS3引入的，以上稱為視口單位允許我們更接近瀏覽器窗口定義大小。

vw、vh、vmin、vmax 的含義

（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似于 1%。

視窗(Viewport)是你的瀏覽器實際顯示內(nèi)容的區(qū)域—，換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。

（2）具體描述如下：

• vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）

• vh：視窗高度的百分比

• vmin：當(dāng)前 vw 和 vh 中較小的一個值

• vmax：當(dāng)前 vw 和 vh 中較大的一個值

vw、vh 與 % 百分比的區(qū)別

（1）% 是相對于父元素的大小設(shè)定的比率，vw、vh 是視窗大小決定的。

（2）vw、vh 優(yōu)勢在于能夠直接獲取高度，而用 % 在沒有設(shè)置 body 高度的情況下，是無法正確獲得可視區(qū)域的高度的，所以這是挺不錯的優(yōu)勢。

vmin、vmax 用處

做移動頁面開發(fā)時，如果使用 vw、wh 設(shè)置字體大?。ū热?5vw），在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。

由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。

瀏覽器兼容性

（1）桌面 PC

• Chrome：自 26 版起就完美支持（2013年2月）

• Firefox：自 19 版起就完美支持（2013年1月）

• Safari：自 6.1 版起就完美支持（2013年10月）

• Opera：自 15 版起就完美支持（2013年7月）

IE：自 IE10 起（包括 Edge）到現(xiàn)在還只是部分支持（不支持 vmax，同時 vm 代替 vmin）

（2）移動設(shè)備

Android：自 4.4 版起就完美支持（2013年12月）

iOS：自 iOS8 版起就完美支持（2014年9月）

如何利用視口單位適配頁面

僅使用vw作為CSS單位

1.根據(jù)設(shè)計稿的尺寸轉(zhuǎn)換為vw單位(SASS函數(shù)編譯)

//iPhone?6尺寸作為設(shè)計稿基準(zhǔn)
$vm_base:?375;
@function?vm($px)?{
????@return?($px?/?375)?*?100vw;
}

2.無論是文本還是布局高寬、間距等都使用 vw

< p class="mod_nav">
????????????< nav class="mod_nav_list" v-for="n in 5">
????????????????< a href="#" class="mod_nav_list_item">
????????????????????< span class="mod_nav_list_item_logo">
????????????????< img src="http://jdc.jd.com/img/80">
????????????????????< /span>
????????????????????< p class="mod_nav_list_item_name">導(dǎo)航入口< /p>
????????????????< /a>
????????????< /nav>
< /p>
.mod_nav?{
????background:?#fff;
????&_list?{
????????display:?flex;
????????padding:?vm(15)?vm(10)?vm(10);
????????&_item?{
????????????flex:?1;
????????????text-align:?center;
????????????font-size:?vm(10);
????????????&_logo?{
????????????????display:?block;
????????????????margin:?0?auto;
????????????????width:?vm(40);
????????????????height:?vm(40);
????????????????img?{
????????????????????display:?block;
????????????????????margin:?0?auto;
????????????????????max-width:?100%;
????????????????}
????????????}
????????????&_name?{
????????????????margin-top:?vm(2);
????????????}
????????}
????}
}

最優(yōu)做法——搭配vw和rem

使用vm作為css單位代碼量確實減少很多，但是你會發(fā)現(xiàn)它是利用視口單位實現(xiàn)，依賴于視口大小而自動縮放，失去了最大最小寬度的限制。

于是，聯(lián)想到不如結(jié)合rem單位來實現(xiàn)布局？rem 彈性布局的核心在于動態(tài)改變根元素大小，那么我們可以通過：·

給根元素大小設(shè)置隨著視口變化而變化的 vw 單位，這樣就可以實現(xiàn)動態(tài)改變其大小。

限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度

這樣我們就能夠?qū)崿F(xiàn)對布局寬度的最大最小限制。因此，根據(jù)以上條件，我們可以得出代碼實現(xiàn)如下：

//?rem?單位換算：定為?75px?只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize:?75;?//?iPhone?6尺寸的根元素大小基準(zhǔn)值
@function?rem($px)?{
?????@return?($px?/?$vm_fontsize?)?*?1rem;
}
//?根元素大小使用?vw?單位
$vm_design:?750;
html?{
????font-size:?($vm_fontsize?/?($vm_design?/?2))?*?100vw;
????//?同時，通過Media?Queries?限制根元素最大最小值
????@media?screen?and?(max-width:?320px)?{
????????font-size:?64px;
????}
????@media?screen?and?(min-width:?540px)?{
????????font-size:?108px;
????}
}
//?body?也增加最大最小寬度限制，避免默認(rèn)100%寬度的?block?元素跟隨?body?而過大過小
body?{
????max-width:?540px;
????min-width:?320px;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！

相關(guān)推薦：

關(guān)于CSS代碼如何書寫規(guī)范

以上是關(guān)于css3的單位vw和vh的使用的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！