自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS Viewport 單位，很多人還不知道使用它來快速布局！

作者： 前端小智
開發(fā) 前端
**CSS Viewport units(視口單位)**在過去幾年已經(jīng)出現(xiàn)了，隨著時(shí)間的推移，越來越多的開發(fā)人員開始使用它們。它們的好處在于為我們提供了一種不需要使用J avaScript 就能以動(dòng)態(tài)的方式調(diào)整大小的方法。而且，如果它失效，也有很多備用方案。

**CSS Viewport units(視口單位)**在過去幾年已經(jīng)出現(xiàn)了，隨著時(shí)間的推移，越來越多的開發(fā)人員開始使用它們。它們的好處在于為我們提供了一種不需要使用J avaScript 就能以動(dòng)態(tài)的方式調(diào)整大小的方法。而且，如果它失效，也有很多備用方案。

[[331872]]

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

簡介

根據(jù)CSS規(guī)范，視口百分比單位相對(duì)于初始包含塊的大小，它是web頁面的根元素。

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

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

視口寬度

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

 

假設(shè)我們有一個(gè)元素與以下CSS：

  1. .element { 
  2.     width: 50vw; 
  3. } 

當(dāng)視口寬度為500px時(shí)，50vw計(jì)算如下

  1. width = 500*50% = 250px 

視口高度vh單位表示根元素高度的百分比，一個(gè)vh等于視口高度的1%。

 

我們有一個(gè)元素與以下CSS:

  1. .element { 
  2.     height: 50vh; 
  3. } 

當(dāng)視口高度為290px時(shí)，70vh計(jì)算如下:

  1. height = 290*70% = 202px 

大家都說簡歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。

Vmin 單位

vmin表示視口的寬度和高度中的較小值，也就是vw 和 vh 中的較小值。如果視口寬度大于其高度，則將根據(jù)高度計(jì)算該值。

我們以下面的例子為例。

 

我們有一個(gè)橫屏手機(jī)，其中有一個(gè)元素具有vmin單元。在這種情況下，值將根據(jù)視口高度計(jì)算，因?yàn)樗∮趯挾取?/p> 

  1. .element { 
  2.     padding-top: 10vmin; 
  3.     padding-bottom: 10vmin; 
  4. } 

這是vmin的計(jì)算方式：

 

正如你所猜測的，計(jì)算結(jié)果如下所示

  1. padding-top = (10% of height) = 10% * 164 = 16.4px  
  2.  
  3. padding-bottom = (10% of height) = 10% * 164 = 16.4px 

Vmax 單位

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

 

我們以下面的例子為例。

  1. .element { 
  2.     padding-top: 10vmax; 
  3.     padding-bottom: 10vmax; 
  4. } 

 

計(jì)算結(jié)果如下:

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

視口單位與百分比有何不同?視口單位基于頁面的根元素，而百分比則基于它們所在的容器。因此，它們彼此不同，但各自都有各自的用處。

視口單位的用例

字體大小

 

CSS 視口單位非常適合響應(yīng)式排版。例如，我們可以將以下內(nèi)容用作文章標(biāo)題：

  1. .title { 
  2.     font-size: 5vw; 
  3. } 

標(biāo)題的font-size將根據(jù)視口寬度增加或縮小。就像提供的字體大小是視口寬度的5%一樣。但是，如果沒有適當(dāng)?shù)臏y試就直接使用它可能會(huì)踩到坑。讓我們看下面的視頻：

 

體大小變得非常小，這不利于可訪問性和用戶體驗(yàn)。據(jù)我所知，移動(dòng)設(shè)備上的最小字體大小不應(yīng)該不于14px。在GIF中，不小于10px。

要解決該問題，我們需要為標(biāo)題提供最小字體大小，可以使用 calc()

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

calc()CSS函數(shù)將具有一個(gè)最小值14px，并在些基礎(chǔ)上添加2vw的值，有了這些，字體大小值就不會(huì)變得太小。

另一個(gè)需要考慮的重要問題是字體大小在大屏幕上的表現(xiàn)，例如 27” iMac。會(huì)發(fā)生什么呢?你猜對(duì)了，字體大小為95px左右，這是一個(gè)很大的值。為了防止這種情況，我們應(yīng)該在某些斷點(diǎn)上使用媒體查詢并更改字體大小。

  1. @media (min-width: 1800px) { 
  2.     .title { 
  3.         font-size: 40px; 
  4.     } 
  5. } 

通過重置字體大小，我們可以確保大小不會(huì)太大。您可能還需要添加多個(gè)媒體查詢，但這取決于你自己，也取決于項(xiàng)目的上下文。

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

全屏

有時(shí)，我們需要一個(gè)section來獲取100%的視口高度，為此，我們可以使用viewport高度單位。

  1. .section { 
  2.     height: 100vh; 
  3.     display: flex; 
  4.     flex-direction: column; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 

通過添加 height: 100vh，我們可以確保section 高度將采取100%的視口。此外，我們添加了一些flexbox來處理水平和垂直居中的內(nèi)容。

事例源碼：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100

粘性布局(footer)

在大屏幕上，網(wǎng)站內(nèi)容有時(shí)候很少，footer 沒有粘在底部。這很正常，也不被認(rèn)為是一種不好的做法。但是，還有改進(jìn)的余地?？紤]下面代表問題的示圖：

 

為了解決這個(gè)問題，我們需要給內(nèi)容(content)一個(gè)高度，它等于視口高度- (header + footer)。動(dòng)態(tài)地做到這一點(diǎn)是很困難的，但是使用CSS的視口，這是很容易的。

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

如果header 和footer的高度是固定的，那么可以將calc()函數(shù)和視口單位結(jié)合起來，如下所示：

  1. header, 
  2. footer { 
  3.     height: 70px; 
  4. } 
  5.  
  6. main { 
  7.     height: calc(100vh - 70px - 70px); 
  8. } 

不能保證此解決方案始終有效，尤其是對(duì)于footer而言。在我的職業(yè)生涯中，我沒有使用固定高度的頁腳，因?yàn)樵诶绮煌钠聊怀叽缦?，此footer是不可行的。

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

通過將100vh設(shè)置為body元素的高度，然后可以使用flexbox來使main元素占用剩余空間。

  1. body { 
  2.     min-height: 100vh; 
  3.     display: flex 
  4.     flex-direction: column; 
  5. { 
  6.  
  7. main { 
  8.     /* This will make the main element take the remaining space dynamically */ 
  9.     flex-grow: 1; 
  10. } 

這樣，問題就解決了，無論內(nèi)容長度如何，我們都有一個(gè)粘性footer。

 

事例源碼：https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100

響應(yīng)式元素

假設(shè)我們有一個(gè)作品集來展示我們的響應(yīng)式設(shè)計(jì)工作，并且我們有三種設(shè)備(移動(dòng)設(shè)備、平板電腦和筆記本電腦)。每個(gè)設(shè)備包含一個(gè)圖像。目標(biāo)使用 CSS 來響應(yīng)適配這些頁面。

 

通過使用CSS網(wǎng)格和視口單位，我們可以使其完全動(dòng)態(tài)的響應(yīng)式。

  1. <div class="wrapper"> 
  2.   <div class="device laptop"></div> 
  3.   <div class="device mobile"></div> 
  4.   <div class="device tablet"></div> 
  5. </div> 

 

 
 
 

 

視口單位也可以用于grid- *屬性，也用于border，border-radius和其他屬性。

  1. .wrapper { 
  2.   display: grid; 
  3.   grid-template-columns: repeat(20, 5vw);  
  4.   grid-auto-rows: 6vw; 
  5. } 
  6.  
  7. .mobile {  
  8.   position: relative; 
  9.   z-index: 1; 
  10.   grid-column: 2 / span 3; 
  11.   grid-row: 3 / span 5; 
  12. } 
  13.   
  14. .tablet { 
  15.   position: relative; 
  16.   z-index: 1; 
  17.   grid-column: 13 / span 7;  
  18.   grid-row: 4 / span 4; 
  19.   border-bottom: 1vw solid #a9B9dd; 
  20.   border-right: solid 3vw #a9B9dd; 
  21. } 
  22.   
  23. .laptop { 
  24.   position: relative; 
  25.   grid-column: 3/span 13; 
  26.   grid-row: 2 / span 8; 
  27. } 
  28.  
  29. /* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */ 
  30. .laptop:after { 
  31.     content:""; 
  32.     position:absolute; 
  33.     bottom: -3vw; 
  34.     left: -5.5vw; 
  35.     right: -5.5vw; 
  36.     height: 3vw; 
  37.     background-color: #a9B9dd; 
  38.     border-radius: 0 0 1vw 1vw; 
  39. } 

 

事例源碼：https://codepen.io/shadeed/pen/2da0f2b70699769f8de3220ff4465bc6?editors=1100

從容器中掙脫出來

我注意到一個(gè)用例最適合編輯版面。一個(gè)子元素，即使父元素的寬度受到限制，它也會(huì)占據(jù)視口100%的寬度?？紤]下面：

  1. .break-out { 
  2.     width: 100vw; 
  3.     position: relative; 
  4.     left: 50%; 
  5.     right: 50%; 
  6.     margin-left: -50vw; 
  7.     margin-right: -50vw; 
  8. } 

讓我們把它分解一下，這樣我們就能一點(diǎn)一點(diǎn)地理解所有這些屬性是如何工作的。

1.添加 width: 100vw

最重要的一步，將圖像的寬度設(shè)置為100%的視口。

 

2.添加 margin-left: -50vw

為了使圖像居中，我們需要給它一個(gè)負(fù)的邊距，其寬度為視口寬度的一半。

 

3.添加 left: 50%

最后，我們需要將圖像向右推，其值為父寬度的50%。

 

事例地址：https://codepen.io/shadeed/pen/828f12b1ef7fa7211584ff5c7b82d2fa?editors=1100

垂直和水平間距

我想到的另一個(gè)有趣的用例是使用視口單位來表示元素之間的間距。這可以與margin、top、bottom和grid-gap等值一起使用。使用時(shí)，間距將基于視口寬度或高度，這對(duì)于使布局更具動(dòng)態(tài)性可能很有用。

模態(tài)框

對(duì)于模態(tài)，我們需要將它們從視口頂部推入。通常，使用top屬性進(jìn)行此操作，并使用百分比或像素值。但是，對(duì)于視口單位，我們可以添加一個(gè)可以根據(jù)視口高度改變的間距。

  1. .modal-body { 
  2.     top: 20vh; 
  3. } 

 

事例地址：https://codepen.io/shadeed/pen/f77a0d58947c64c2b3dadbd887700db5?editors=1100

頁面頭部

頁面header 是充當(dāng)頁面介紹的部分。它通常具有標(biāo)題和描述，并且其中上下邊緣的高度固定或填充

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

  1. .page-header { 
  2.     padding-top: 10vh; 
  3.     padding-bottom: 10vh; 
  4. } 
  5.  
  6. .page-header h2 { 
  7.     margin-bottom: 1.5vh; 
  8. } 

使用vh單位用于頁面標(biāo)題的 paddding，以及標(biāo)題下方的邊距。注意間距如何變化!

 

事例源碼：https://codepen.io/shadeed/pen/43024fa031519e316e95bb3ce47f2b22?editors=1100

Vmin 和 Vmax 用例

該用例是關(guān)于頁面標(biāo)題元素的頂部和底部padding 。當(dāng)視口較小(移動(dòng))時(shí)，通常會(huì)減少padding。通過使用vmin，我們可以在視口較小尺寸(寬度或高度)的基礎(chǔ)上獲得合適的頂部和底部 padding。

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

 

事例源碼：https://codepen.io/shadeed/pen/f335c2f43b960a2c70ea057228ddc5b9?editors=0100

縱橫比

我們可以使用vw單位創(chuàng)建響應(yīng)元素，以保持其縱橫比，而不管視口大小如何。

首先，需要先確定所需的縱橫比，對(duì)于此示例，使用9/16。

  1. section { 
  2.     /* 9/16 * 100 */ 
  3.     height: 56.25vw; 
  4. } 

 

事例源碼：https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=0100

流行的頂部邊框

你知道大多數(shù)網(wǎng)站使用的頂部邊框嗎?通常，它的顏色與品牌顏色相同，這會(huì)賦予一些個(gè)性。

 

我們支持邊框的初始值為3px。如何將固定值轉(zhuǎn)換為視口對(duì)象?下面是如何計(jì)算它的等效的vw。

  1. vw = (Pixel Value / Viewport width) * 100 

視口寬度用于估計(jì)像素值與所需vw單位之間的比率。

對(duì)于我們的示例，我們?yōu)?header 添加以下樣式：

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

在我的情況下，視口寬度為1440(這不是固定數(shù)字，請(qǐng)用你自己的數(shù)字替換)

  1. vw = (4 / 1440) * 100 = 0.277 
  2. .header { 
  3.     border-top: 0.277vw solid #8f7ebc;   
  4. } 

更好的是，我們可以使用一個(gè)基本像素值，而視口單元可以是一個(gè)附加的。

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

移動(dòng)端滾動(dòng)問題

移動(dòng)設(shè)備中存在一個(gè)常見問題，即使使用100vh，也會(huì)滾動(dòng)，原因是地址欄的高度可見。Louis Hoebregts 寫了一篇關(guān)于這個(gè)問題的文章，并給出了一個(gè)簡單的解決方案。

  1. .my-element { 
  2.   height: 100vh; /* 不支持自定義屬性的瀏覽器的回退 */ 
  3.   height: calc(var(--vh, 1vh) * 100); 
  4. } 
  5. // 首先，我們得到視口高度，我們乘以 1% 得到一個(gè)vh單位的值 
  6. let vh = window.innerHeight * 0.01; 
  7. // 然后，將`--vh`自定義屬性中的值設(shè)置為文檔的根目錄一個(gè)屬性 
  8. document.documentElement.style.setProperty('--vh', `${vh}px`); 

 

 


 

 

事例源碼：https://codepen.io/shadeed/pen/1d18ca2d23ec0038c759dc62dc3fd8c3?editors=0110

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

 

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

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

[[331884]]

 

責(zé)任編輯：武曉燕 來源： 大遷世界
CSS規(guī)范web
相關(guān)推薦

2021-01-15 05:39:13

HashMapHashTableTreeMap

2020-06-29 08:28:36

v-for 解構(gòu)函數(shù)

2022-12-05 15:23:33

JavaScript技巧運(yùn)算符

2021-08-27 10:03:12

人工智能AI

2020-11-20 06:13:04

Like %

2020-07-07 08:35:53

VueKey組件

2015-07-22 11:53:29

云計(jì)算AWS分析癱瘓

2020-07-14 08:43:54

VueHTML函數(shù)

2019-12-13 19:52:29

人工智能AI

2018-08-10 10:36:25

SSL證書誤區(qū)

2021-08-24 00:13:23

Windows 10Windows微軟

2019-01-07 09:27:39

2023-06-05 08:07:34

聚集索引存儲(chǔ)數(shù)據(jù)

2016-07-22 17:55:07

云計(jì)算

2024-09-12 08:32:42

2022-01-05 23:34:02

顯示器濾藍(lán)光LED

2021-10-19 14:49:49

CSS前端

2022-09-19 18:32:22

函數(shù)編程語言

2021-07-14 11:25:12

CSSPosition定位

2021-05-08 23:19:25

微信存儲(chǔ)小程序
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)