使用 CSS Viewport 完成響應式佈局

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。css

github 地址：https://github.com/qq44924588...前端

CSS Viewport units(視口單位)在過去幾年已經出現了，隨着時間的推移，愈來愈多的開發人員開始使用它們。它們的好處在於爲咱們提供了一種不須要使用J avaScript 就能以動態的方式調整大小的方法。並且，若是它失效，也有不少備用方案。vue

在本文中，咱們將學習 CSS Viewport units(視口單位)以及如何使用它們，並用列舉一些常見問題及其解決方案和用例，讓咱們開始吧。git

簡介

根據CSS規範，視口百分比單位相對於初始包含塊的大小，它是web頁面的根元素。github

視口單位爲：vw，vh，vmin和vmax。web

vw單位表示根元素寬度的百分比。1vw等於視口寬度的1%。面試

視口寬度

vw單位表示根元素寬度的百分比，1vw等於視口寬度的1%。瀏覽器

假設咱們有一個元素與如下CSS：微信

.element {
    width: 50vw;
}

當視口寬度爲500px時，50vw計算以下app

width = 500*50% = 250px

視口高度

vh單位表示根元素高度的百分比，一個vh等於視口高度的1%。

咱們有一個元素與如下CSS:

.element {
    height: 50vh;
}

當視口高度爲290px時，70vh計算以下:

height = 290*70% = 202px

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Vmin 單位

vmin表示視口的寬度和高度中的較小值，也就是vw 和 vh 中的較小值。若是視口寬度大於其高度，則將根據高度計算該值。

咱們如下面的例子爲例。

咱們有一個橫屏手機，其中有一個元素具備vmin單元。在這種狀況下，值將根據視口高度計算，由於它小於寬度。

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}

這是vmin的計算方式：

正如你所猜想的，計算結果以下所示

padding-top = (10% of height) = 10% * 164 = 16.4px 

padding-bottom = (10% of height) = 10% * 164 = 16.4px

Vmax 單位

vmax與vmin相反,該值是vw 和 vh 中的較大值。

咱們如下面的例子爲例。

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}

計算結果以下:

padding-top = (10% of width) = 10% * 350 = 35px 
padding-bottom = (10% of width) = 10% * 350 = 35px

視口單位與百分比有何不一樣？

視口單位基於頁面的根元素，而百分比則基於它們所在的容器。所以，它們彼此不一樣，但各自都有各自的用處。

視口單位的用例

字體大小

CSS 視口單位很是適合響應式排版。例如，咱們能夠將如下內容用做文章標題：

.title {
    font-size: 5vw;
}

標題的font-size將根據視口寬度增長或縮小。就像提供的字體大小是視口寬度的5％同樣。可是，若是沒有適當的測試就直接使用它可能會踩到坑。讓咱們看下面的視頻：

體大小變得很是小，這不利於可訪問性和用戶體驗。據我所知，移動設備上的最小字體大小不該該不於14px。在GIF中，不小於10px。

要解決該問題，咱們須要爲標題提供最小字體大小，可使用 calc()

.title {
    font-size: calc(14px + 2vw);
}

calc()CSS函數將具備一個最小值14px，並在些基礎上添加2vw的值，有了這些，字體大小值就不會變得過小。

另外一個須要考慮的重要問題是字體大小在大屏幕上的表現，例如 27」 iMac。會發生什麼呢?你猜對了，字體大小爲95px左右，這是一個很大的值。爲了防止這種狀況，咱們應該在某些斷點上使用媒體查詢並更改字體大小。

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

經過重置字體大小，咱們能夠確保大小不會太大。您可能還須要添加多個媒體查詢，但這取決於你本身，也取決於項目的上下文。

事例地址：https://codepen.io/shadeed/pe...

全屏

有時，咱們須要一個section來獲取100%的視口高度，爲此，咱們可使用viewport高度單位。

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

經過添加 height: 100vh，咱們能夠確保section 高度將採起100%的視口。此外，咱們添加了一些flexbox來處理水平和垂直居中的內容。

事例源碼：https://codepen.io/shadeed/pe...

粘性佈局(footer)

在大屏幕上，網站內容有時候不多，footer 沒有粘在底部。這很正常，也不被認爲是一種很差的作法。可是，還有改進的餘地。考慮下面表明問題的示圖：

爲了解決這個問題，咱們須要給內容(content)一個高度，它等於視口高度- (header + footer)。動態地作到這一點是很困難的，可是使用CSS的視口，這是很容易的。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

第一種解決方案:`calc`和視口單位

若是header 和footer 的高度是固定的，那麼能夠將calc()函數和視口單位結合起來，以下所示：

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}

不能保證此解決方案始終有效，尤爲是對於footer而言。在個人職業生涯中，我沒有使用固定高度的頁腳，由於在例如不一樣的屏幕尺寸下，此footer是不可行的。

2.第二種解決方案：Flexbox和視口單位（推薦）

經過將100vh設置爲body元素的高度，而後可使用flexbox來使main元素佔用剩餘空間。

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}

這樣，問題就解決了，不管內容長度如何，咱們都有一個粘性footer。

事例源碼：https://codepen.io/shadeed/pe...

響應式元素

假設咱們有一個做品集來展現咱們的響應式設計工做，而且咱們有三種設備(移動設備、平板電腦和筆記本電腦)。每一個設備包含一個圖像。目標使用 CSS 來響應適配這些頁面。

經過使用CSS網格和視口單位，咱們可使其徹底動態的響應式。

<div class="wrapper">
  <div class="device laptop"></div>
  <div class="device mobile"></div>
  <div class="device tablet"></div>
</div>

視口單位也能夠用於grid- *屬性，也用於border，border-radius和其餘屬性。

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

/* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */
.laptop:after {
    content:"";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-radius: 0 0 1vw 1vw;
}

!

例：https://codepen.io/shadeed/pe...

從容器中掙脫出來

我注意到一個用例最適合編輯版面。一個子元素，即便父元素的寬度受到限制，它也會佔據視口100％的寬度。考慮下面：

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

讓咱們把它分解一下，這樣咱們就能一點一點地理解全部這些屬性是如何工做的。

1.添加 width: 100vw

最重要的一步，將圖像的寬度設置爲100%的視口。

2.添加 margin-left: -50vw

爲了使圖像居中，咱們須要給它一個負的邊距，其寬度爲視口寬度的一半。

3.添加 left: 50%

最後，咱們須要將圖像向右推，其值爲父寬度的50％。

事例地址：https://codepen.io/shadeed/pe...

垂直和水平間距

我想到的另外一個有趣的用例是使用視口單位來表示元素之間的間距。這能夠與margin、top、bottom和grid-gap等值一塊兒使用。使用時，間距將基於視口寬度或高度，這對於使佈局更具動態性可能頗有用。

模態框

對於模態，咱們須要將它們從視口頂部推入。一般，使用top屬性進行此操做，並使用百分比或像素值。可是，對於視口單位，咱們能夠添加一個能夠根據視口高度改變的間距。

.modal-body {
    top: 20vh;
}

事例地址：https://codepen.io/shadeed/pe...

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

頁面頭部

頁面header 是充當頁面介紹的部分。它一般具備標題和描述，而且其中上下邊緣的高度固定或填充

例如，有如下的CSS的樣式：

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h2 {
    margin-bottom: 1.5vh;
}

使用vh單位用於頁面標題的 paddding，以及標題下方的邊距。注意間距如何變化！

事例源碼：https://codepen.io/shadeed/pe...

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Vmin 和 Vmax 用例

該用例是關於頁面標題元素的頂部和底部padding 。當視口較小（移動）時，一般會減小padding 。經過使用vmin，咱們能夠在視口較小尺寸（寬度或高度）的基礎上得到合適的頂部和底部 padding。

.page-header {
    padding: 10vmin 1rem;
}

事例源碼：https://codepen.io/shadeed/pe...

縱橫比

咱們可使用vw單位建立響應元素，以保持其縱橫比，而無論視口大小如何。

首先，須要先肯定所需的縱橫比，對於此示例，使用9/16。

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

事例源碼：https://codepen.io/shadeed/pe...

流行的頂部邊框

你知道大多數網站使用的頂部邊框嗎？一般，它的顏色與品牌顏色相同，這會賦予一些個性。

咱們支持邊框的初始值爲3px。如何將固定值轉換爲視口對象？下面是如何計算它的等效的vw。

vw = (Pixel Value / Viewport width) * 100

視口寬度用於估計像素值與所需vw單位之間的比率。

對於咱們的示例，咱們爲 header 添加如下樣式：

.header {
    border-top: 4px solid #8f7ebc;  
}

在個人狀況下，視口寬度爲1440（這不是固定數字，請用你本身的數字替換）

vw = (4 / 1440) * 100 = 0.277

.header {
    border-top: 0.277vw solid #8f7ebc;  
}

更好的是，咱們可使用一個基本像素值，而視口單元能夠是一個附加的。

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

移動端滾動問題

移動設備中存在一個常見問題，即便使用100vh，也會滾動，緣由是地址欄的高度可見。Louis Hoebregts 寫了一篇關於這個問題的文章，並給出了一個簡單的解決方案。

.my-element {
  height: 100vh; /* 不支持自定義屬性的瀏覽器的回退 */
  height: calc(var(--vh, 1vh) * 100);
}

// 首先，咱們獲得視口高度，咱們乘以 1% 獲得一個vh單位的值
let vh = window.innerHeight * 0.01;
// 而後，將`--vh`自定義屬性中的值設置爲文檔的根目錄一個屬性
document.documentElement.style.setProperty('--vh', `${vh}px`);

事例源碼：https://codepen.io/shadeed/pe...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://ishadeed.com/viewport...

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

本文同步分享在博客「前端小智」（SegmentFault）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

使用 CSS Viewport 完成響應式佈局

簡介

視口寬度

視口高度

Vmin 單位

Vmax 單位

視口單位與百分比有何不一樣？

視口單位的用例

字體大小

全屏

粘性佈局(footer)

第一種解決方案:calc和視口單位

2.第二種解決方案：Flexbox和視口單位（推薦）

響應式元素

從容器中掙脫出來

垂直和水平間距

模態框

頁面頭部

Vmin 和 Vmax 用例

縱橫比

流行的頂部邊框

移動端滾動問題

交流

第一種解決方案:`calc`和視口單位