JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用神奇的 CSS 視口單元簡化您的樣式表

視口單元已經存在了幾年,但我們真的沒有看到它們被大量使用。它們現在受到所有主要瀏覽器 (caniuse) 的支持,並提供在特定情況下非常有用的獨特功能,尤其是涉及響應式設計的情況。

介紹視口單位

視口是瀏覽器中顯示實際內容的區域 - 換句話說,您的 Web 瀏覽器沒有工具欄和按鈕。單位是vw , vh , vminvmax .它們都代表瀏覽器(視口)尺寸的百分比,並在調整窗口大小時相應縮放。

假設我們有一個 1000px(寬)乘 800px(高)的視口:

  • 大眾 - 代表視口寬度的 1%。在我們的例子中,50vw =500px。
  • vh - 窗口高度的百分比。 50vh =400 像素。
  • vmin - 兩者中最小值的百分比。在我們的示例中,50vmin =400px,因為我們處於橫向模式。
  • vmax - 較大尺寸的百分比。 50vmax =500 像素。

您可以在任何可以指定像素值的地方使用這些單位,例如在 width 中 , height , margin , font-size 和更多。它們將由瀏覽器在窗口調整大小或設備旋轉時重新計算。

1。佔據頁面的整個高度

每個前端開發人員都曾在某個時候為此苦苦掙扎。你的第一直覺是做這樣的事情:

#elem{
    height: 100%;
}

但是,除非我們為 body 添加 100% 的高度,否則這將不起作用 和 html 同樣,這不是很優雅,可能會破壞您的其餘設計。使用 vh 這很容易。只需將其高度設置為 100vh 它永遠和你的窗戶一樣高。

#elem{
    height: 100vh;
}

這對於那些現在看起來很流行的全屏英雄圖像來說是完美的。

2。子級相對於瀏覽器的大小,而不是父級

在某些情況下,您希望相對於窗口而不是其父元素來調整子元素的大小。與前面的示例類似,這不起作用:

#parent{
    width: 400px;
}
#child{ 
    /* This is equal to 100% of the parent width, not the whole page. */ 
    width: 100%; 
}

如果我們使用 vw 相反,我們的子元素只會溢出它的父元素並佔據頁面的整個寬度:

#parent{
    width: 400px;
}
#child{
    /* This is equal to 100% of page, regardless of the parent size. */
    width: 100vw;
}

3。響應式字體大小

視口單位也可以用於文本!在此示例中,我們將字體大小設置為 vw 在一行 CSS 中創建出色的文本響應能力。再見 Fittext!

h2.responsive-text{
    font-size: 6vw;
}
h4.responsive-text{
    font-size: 3vw;
}

4.響應式垂直居中

通過在視口單位中設置元素的寬度、高度和邊距,您可以在不使用任何其他技巧的情況下將其居中。

在這裡,這個矩形的高度為 60vh 以及 20vh 的上下邊距 ,加起來是 100vh (60 + 2*20) 使其始終居中,即使在調整窗口大小時也是如此。

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

5。等寬列

您可以使用視口單元來製作響應式網格。它們的行為類似於基於百分比的行為,但總是相對於視口調整大小。因此,例如,您可以將它們放置在比窗口寬的父元素中,並且仍然讓網格保持其適當的寬度。這在構建全屏滑塊時會派上用場。

此技術要求元素具有 float:left; 將元素彼此相鄰對齊:

.column-2{
    float: left;
    width: 50vw;
}
.column-4{
    float: left;
    width: 25vw;
}
.column-8{
    float: left;
    width: 12.5vw;
}

結論

視口單位有其用途,值得嘗試。它們很容易理解,並且在某些場景中非常有用,在這些場景中,使用替代 CSS 技術的解決方案將更難或不可能實現。


Tutorial JavaScript 教程
  1. 組件 #5 - 開關

  2. 從字符串正則表達式中提取變量

  3. 如何創建 React 下拉菜單

  4. Array.prototype.sort() 方法教程

  5. 在嵌套對像中返回結果

  6. Access-Control-Allow-Origin:處理 React 和 Express 中的 CORS 錯誤

  7. Hacktoberfest Markdown 編輯器挑戰:第 -2 天(準備工作)

  1. 在 React 中將函數作為 Props 傳遞

  2. 將數組中的樹轉換為使用 React Flow 和 Dagre 顯示

  3. 在 Node.js 中發出 HTTP 請求的 5 種方法 - 2020 版

  4. Heritier 的不太全面的 webdev 指南:查看 HTML、CSS 和 javascript

  5. 介紹字節大小的技術提示綜述

  6. 使用 TypeScript 實現冒泡排序算法

  7. Doug the Goldfish 的依賴注入 🐠

  1. 在 Angular v11 中設置 Tailwind CSS

  2. 2022 年最佳 CSS 框架

  3. 構建全棧 Aavegotchi 小遊戲 - 第 3 部分:部署遊戲

  4. 使用 Testem 讓 JavaScript 測試變得有趣