Viewport單位:vw,vh,vmin,vmax_html/css

要它做什么？？

前端界這么多新的熊孩子，這家伙又是干嘛的呢？我為什么要去學(xué)習(xí)它呢？

賣個(gè)關(guān)子，先讓我們看一下Demo

仔細(xì)看，這里有這么幾點(diǎn)值得我們探討的：

1. 首先是文字的大?。?/p>

   細(xì)心的小伙伴應(yīng)該發(fā)現(xiàn)了，文字的大小隨著窗口寬度變化而變化，窗口寬度小文字的大小也小，反之亦然，正常情況下想要用CSS實(shí)現(xiàn)這種效果可不是那么的容易。

2. 其次是高度：

   灰色框的高度始終和屏幕高度一致，如果是傳統(tǒng)的CSS中，我們得這樣寫(xiě)：

   html,body { height: 100%;}.box { height: 100%}

   其中前3行是要指定 html 和 body 的高度，為什么這樣做呢？因?yàn)閐om高度是參照父節(jié)點(diǎn)所計(jì)算而來(lái)的，如果不指定父節(jié)點(diǎn)的height，子節(jié)點(diǎn)也無(wú)法實(shí)現(xiàn)100%的高度。

   注意看，文字的行高也始終和窗口的高度保持一致。

怎么做？！

看了上面的Demo，一定很想知道是如何實(shí)現(xiàn)的，先來(lái)猜猜其中主要代碼需要幾行？

20行？ 10行？ 5行？

No! 核心代碼其實(shí)只要3行?。≡趺礃芋@呆了吧，哈哈，讓我們來(lái)瞧瞧到底我們寫(xiě)了什么：

html, body{ margin: 0; padding: 0;}.title { /*重要的3行代碼*/ font-size: 5vw; height: 100vh; line-height: 100vh; /********/ text-align: center; background: grey;}

其中除了.title的前3行外，其他的都是為了美觀而寫(xiě)的，其實(shí)可以略去，所以3行代碼足以實(shí)現(xiàn)上面的效果，是不是很神奇？

為什么??！

之所以3行代碼就解決了這些主要還是靠這幾個(gè)熊孩子的幫忙: vw , vh , vmax , vmin 。那他們究竟是做什么的呢？看了下面的公式應(yīng)該就清楚了：

其實(shí)還是很簡(jiǎn)單的4個(gè)公式，說(shuō)到這里英語(yǔ)不好的小伙伴一定在嘀咕“我去，又是4個(gè)奇怪的單詞，如何記憶？”，其實(shí)仔細(xì)看你會(huì)發(fā)現(xiàn)這些單位其實(shí)就是2個(gè)單詞拼接起來(lái)的，其中 v = viewport , w = width , h = height, 寬度就是 viewport + width = vh, 最大寬度就是 viewport + max = vmax，然后在記憶一下他們的單位是1%然后就大功告成了。

可以用么？

目前他的兼容性如下：

具體可以前往 Can I Use 查看

可見(jiàn)除了微軟家族外，其他的瀏覽器都是挺友好的，使用的時(shí)候考慮到平緩?fù)嘶?，?yīng)該問(wèn)題不大。

如：

font-size: 18px;font-size: 4vw;

ok，就寫(xiě)到這里了，有什么問(wèn)題可以隨時(shí)給我留言。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com