視口單位vm、vh在網(wǎng)頁中的排版應(yīng)用
視口單位是什么? 在 CSS 規(guī)范中，有4種類型的可用視口單位：
vw --- 1vw 等于視口寬度的 1%
vh --- 1vh 等于視口高度的 1%
vmin --- vw 和 vh 中的較小值
vmax --- vw 和 vh 中的較大值
視口，即瀏覽器屏幕大小，1vw 等于瀏覽器寬度的 1%，100vw 即整個瀏覽器的寬度。
視口的單位大小會根據(jù)視口大小的改變自動計算，視口大小的改變常發(fā)生于頁面加載、頁面縮放或者屏幕方向的改變(橫縱切換)。正因為如此，創(chuàng)建一個大小總為視口四分之一大小的容器是非常容易滴：
.component {
width: 50vw;
height: 50vh;
background: rgba(255, 0, 0, 0.25)
}
將視口單位用于網(wǎng)頁排版
將視口單位用于網(wǎng)頁排版的唯一理由就是視口的單位大小會根據(jù)客戶端瀏覽器的視口大小自動計算。也就是說，我們不必明確地通過媒體查詢來聲明字體大小。舉個demo來簡要說明一下。
代碼如下，將斷點設(shè)置為 800px，字體大小從 16px 變?yōu)?20px：
html {
font-size: 16px;
@media (min-width: 800px) {
font-size: 20px;
}
}
對于上述代碼，當(dāng)視口大小是 800px 時，字體會從 16px "突變" 到 20px。在響應(yīng)式排版中，這是經(jīng)常采用的方式。有時，你會碰到在兩個斷點之間添加額外的媒體查詢來確保頁面排版適應(yīng)所有設(shè)備：
html {
font-size: 16px;
@media (min-width: 600px) {
font-size: 18px;
}
@media (min-width: 800px) {
font-size: 20px;
}
}
盡管這樣做能達到效果，但需要更多特定的媒體查詢規(guī)則和字體大小。通常，會選擇 3~4 中字體大小。
但是，如何不同媒體查詢或字體大小的設(shè)置來達到同樣的效果呢?
當(dāng)然是有滴，這就是視口單位的用處了。你可以用視口單位來表示字體大小：
html { font-size: 3vw; }
- 2018-07-31平面排版設(shè)計的技巧如何設(shè)計更好的版面
- 2018-07-192018年下半年網(wǎng)頁設(shè)計較新流行趨勢
- 2018-07-13網(wǎng)頁設(shè)計使用單頁設(shè)計還是多頁設(shè)計
- 2018-06-23優(yōu)秀Logo設(shè)計技巧-群化的應(yīng)用
- 2018-06-16網(wǎng)頁和APP中背景的8個主要設(shè)計趨勢
- 2018-06-09網(wǎng)頁設(shè)計較新流行設(shè)計趨勢
- 2018-06-05網(wǎng)頁設(shè)計提升用戶體驗的設(shè)計原則
- 2018-06-04平面設(shè)計中幫助排版的幾個小技巧
- 2018-06-02排版版式設(shè)計中的版面率和留白率
- 2018-05-26網(wǎng)頁設(shè)計中漸變色彩作用特點
- 2018-05-12現(xiàn)在正在流行的3種網(wǎng)頁設(shè)計趨勢
- 2018-05-07文字排版設(shè)計的文字使用技巧
- 2018-04-202018年較新網(wǎng)頁設(shè)計流行趨勢分析
- 2018-04-13網(wǎng)頁設(shè)計中背景紋理的設(shè)計特點
- 2018-04-10學(xué)習(xí)網(wǎng)頁設(shè)計的心得體會
- 求學(xué)問答專業(yè)答復(fù)，快速響應(yīng)
- 電話：0371-63218905
- 手機：13613841515
-
QQ：
