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

響應(yīng)式佈局的單位我們第一時間會想到透過rem單位來實(shí)現(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é)點(diǎn)或頁面的根節(jié)點(diǎn)。而是由視窗（Viewport）大小來決定的，單位 1，代表類似 1%。

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

（2）具體描述如下：

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

• vh：視窗高度的百分比

• vmin：目前vw 和vh 中較小的一個值

• vmax：目前vw 和vh 中較大的一個值

vw、vh 與% 百分比的差異

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

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

vmin、vmax 用處

#做移動頁面開發(fā)時，如果使用vw、wh 設(shè)定字體大?。ɡ?vw），在垂直螢?zāi)缓蜋M屏狀態(tài)下顯示的字體大小是不一樣的。

由於 vmin 和 vmax 是目前較小的 vw 和 vh 和目前較大的 vw 和 vh。這裡就可以用到 vmin 和 vmax。使得文字大小在橫向螢?zāi)幌卤３忠恢隆?

瀏覽器相容性

（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）行動裝置

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

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

如何利用視窗單位適應(yīng)頁面

僅使用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單位代碼量確實(shí)減少很多，但你會發(fā)現(xiàn)它是利用視口單位實(shí)現(xiàn)，依賴視口大小而自動縮放，失去了最大最小寬度的限制。

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

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

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

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

//?rem?單位換算：定為?75px?只是方便運(yùn)算，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)文章！