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