網(wǎng)頁(yè)美工設計

視口單位vm、vh在網(wǎng)頁(yè)中的排版應用

編輯：時(shí)間：2018-08-01 09:07:18

　　視口單位是什么?　在 CSS 規范中，有4種類(lèi)型的可用視口單位：

　　vw --- 1vw 等于視口寬度的 1%

　　vh --- 1vh 等于視口高度的 1%

　　vmin --- vw 和 vh 中的較小值

　　vmax --- vw 和 vh 中的較大值

　　視口，即瀏覽器屏幕大小，1vw 等于瀏覽器寬度的 1%，100vw 即整個(gè)瀏覽器的寬度。

　　視口的單位大小會(huì )根據視口大小的改變自動(dòng)計算，視口大小的改變常發(fā)生于頁(yè)面加載、頁(yè)面縮放或者屏幕方向的改變(橫縱切換)。正因為如此，創(chuàng )建一個(gè)大小總為視口四分之一大小的容器是非常容易滴：

　　.component {

　　width: 50vw;

　　height: 50vh;

　　background: rgba(255, 0, 0, 0.25)

　　}

　　將視口單位用于網(wǎng)頁(yè)排版

　　將視口單位用于網(wǎng)頁(yè)排版的唯一理由就是視口的單位大小會(huì )根據客戶(hù)端瀏覽器的視口大小自動(dòng)計算。也就是說(shuō)，我們不必明確地通過(guò)媒體查詢(xún)來(lái)聲明字體大小。舉個(gè)demo來(lái)簡(jiǎn)要說(shuō)明一下。

　　代碼如下，將斷點(diǎn)設置為 800px，字體大小從 16px 變?yōu)?20px：

　　html {

　　font-size: 16px;

　　@media (min-width: 800px) {

　　font-size: 20px;

　　}

　　對于上述代碼，當視口大小是 800px 時(shí)，字體會(huì )從 16px "突變" 到 20px。在響應式排版中，這是經(jīng)常采用的方式。有時(shí)，你會(huì )碰到在兩個(gè)斷點(diǎn)之間添加額外的媒體查詢(xún)來(lái)確保頁(yè)面排版適應所有設備：

　　html {

　　font-size: 16px;

　　@media (min-width: 600px) {

　　font-size: 18px;

　　}

　　@media (min-width: 800px) {

　　font-size: 20px;

　　}

　　盡管這樣做能達到效果，但需要更多特定的媒體查詢(xún)規則和字體大小。通常，會(huì )選擇 3~4 中字體大小。

　　但是，如何不同媒體查詢(xún)或字體大小的設置來(lái)達到同樣的效果呢?

　　當然是有滴，這就是視口單位的用處了。你可以用視口單位來(lái)表示字體大小：

　　html { font-size: 3vw; }