您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS中Viewport單位如何實(shí)現(xiàn)快速布局,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
**CSS Viewport units(視口單位)**在過去幾年已經(jīng)出現(xiàn)了,隨著時(shí)間的推移,越來越多的開發(fā)人員開始使用它們。它們的好處在于為我們提供了一種不需要使用J avaScript 就能以動(dòng)態(tài)的方式調(diào)整大小的方法。而且,如果它失效,也有很多備用方案。
在本文中,我們將學(xué)習(xí) CSS Viewport units(視口單位)以及如何使用它們,并用列舉一些常見問題及其解決方案和用例,讓我們開始吧。
簡(jiǎn)介
根據(jù)CSS規(guī)范,視口百分比單位相對(duì)于初始包含塊的大小,它是web頁面的根元素。
視口單位為:vw
,vh
,vmin
和vmax
。
vw
單位表示根元素寬度的百分比。1vw
等于視口寬度的1%
。
視口寬度
vw
單位表示根元素寬度的百分比,1vw
等于視口寬度的1%
。
假設(shè)我們有一個(gè)元素與以下CSS:
.element { width: 50vw; }
當(dāng)視口寬度為500px
時(shí),50vw
計(jì)算如下
width = 500*50% = 250px
視口高度
vh
單位表示根元素高度的百分比,一個(gè)vh
等于視口高度的1%
。
我們有一個(gè)元素與以下CSS:
.element { height: 50vh; }
當(dāng)視口高度為290px
時(shí),70vh
計(jì)算如下:
height = 290*70% = 202px
大家都說簡(jiǎn)歷沒項(xiàng)目寫,我就幫大家找了一個(gè)項(xiàng)目,還附贈(zèng)【搭建教程】。
Vmin 單位
vmin
表示視口的寬度和高度中的較小值,也就是vw
和 vh
中的較小值。如果視口寬度大于其高度,則將根據(jù)高度計(jì)算該值。
我們以下面的例子為例。
我們有一個(gè)橫屏手機(jī),其中有一個(gè)元素具有vmin
單元。在這種情況下,值將根據(jù)視口高度計(jì)算,因?yàn)樗∮趯挾取?/p>
.element { padding-top: 10vmin; padding-bottom: 10vmin; }
這是vmin
的計(jì)算方式:
正如你所猜測(cè)的,計(jì)算結(jié)果如下所示
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; }
計(jì)算結(jié)果如下:
padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = 35p
視口單位與百分比有何不同?
視口單位基于頁面的根元素,而百分比則基于它們所在的容器。因此,它們彼此不同,但各自都有各自的用處。
視口單位的用例字體大小
CSS 視口單位非常適合響應(yīng)式排版。例如,我們可以將以下內(nèi)容用作文章標(biāo)題:
.title { font-size: 5vw; }
標(biāo)題的font-size
將根據(jù)視口寬度增加或縮小。就像提供的字體大小是視口寬度的5%
一樣。但是,如果沒有適當(dāng)?shù)臏y(cè)試就直接使用它可能會(huì)踩到坑。讓我們看下面的視頻:
體大小變得非常小,這不利于可訪問性和用戶體驗(yàn)。據(jù)我所知,移動(dòng)設(shè)備上的最小字體大小不應(yīng)該不于14px
。在GIF中,不小于10px
。
要解決該問題,我們需要為標(biāo)題提供最小字體大小,可以使用 calc()
.title { font-size: calc(14px + 2vw); }
calc()
CSS函數(shù)將具有一個(gè)最小值14px
,并在些基礎(chǔ)上添加2vw
的值,有了這些,字體大小值就不會(huì)變得太小。
另一個(gè)需要考慮的重要問題是字體大小在大屏幕上的表現(xiàn),例如 27” iMac
。會(huì)發(fā)生什么呢?你猜對(duì)了,字體大小為95px
左右,這是一個(gè)很大的值。為了防止這種情況,我們應(yīng)該在某些斷點(diǎn)上使用媒體查詢并更改字體大小。
@media (min-width: 1800px) { .title { font-size: 40px; } }
通過重置字體大小,我們可以確保大小不會(huì)太大。您可能還需要添加多個(gè)媒體查詢,但這取決于你自己,也取決于項(xiàng)目的上下文。
事例地址:https://codepen.io/shadeed/pen/fa989837c6379770cce49f0be6daa3e3
全屏
有時(shí),我們需要一個(gè)p
來獲取100%
的視口高度,為此,我們可以使用viewport
高度單位。
.p { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
通過添加 height: 100vh
,我們可以確保p
高度將采取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é)合起來,如下所示:
header, footer { height: 70px; } main { height: calc(100vh - 70px - 70px); }
不能保證此解決方案始終有效,尤其是對(duì)于footer
而言。在我的職業(yè)生涯中,我沒有使用固定高度的頁腳,因?yàn)樵诶绮煌钠聊怀叽缦?,?code>footer是不可行的。
2.第二種解決方案:Flexbox和視口單位(推薦)
通過將100vh
設(shè)置為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; }
這樣,問題就解決了,無論內(nèi)容長(zhǎng)度如何,我們都有一個(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)式。
<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/pen/2da0f2b70699769f8de3220ff4465bc6?editors=1100
從容器中掙脫出來
我注意到一個(gè)用例最適合編輯版面。一個(gè)子元素,即使父元素的寬度受到限制,它也會(huì)占據(jù)視口100%
的寬度??紤]下面:
.break-out { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
讓我們把它分解一下,這樣我們就能一點(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ù)視口高度改變的間距。
.modal-body { top: 20vh; }
事例地址:https://codepen.io/shadeed/pen/f77a0d58947c64c2b3dadbd887700db5?editors=1100
頁面頭部
頁面header
是充當(dāng)頁面介紹的部分。它通常具有標(biāo)題和描述,并且其中上下邊緣的高度固定或填充
例如,有以下的CSS的樣式:
.page-header { padding-top: 10vh; padding-bottom: 10vh; } .page-header h3 { margin-bottom: 1.5vh; }
使用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
。
.page-header { padding: 10vmin 1rem; }
事例源碼:https://codepen.io/shadeed/pen/f335c2f43b960a2c70ea057228ddc5b9?editors=0100
縱橫比
我們可以使用vw
單位創(chuàng)建響應(yīng)元素,以保持其縱橫比,而不管視口大小如何。
首先,需要先確定所需的縱橫比,對(duì)于此示例,使用9/16
。
p { /* 9/16 * 100 */ height: 56.25vw; }
事例源碼:https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=0100
流行的頂部邊框
你知道大多數(shù)網(wǎng)站使用的頂部邊框嗎?通常,它的顏色與品牌顏色相同,這會(huì)賦予一些個(gè)性。
我們支持邊框的初始值為3px
。如何將固定值轉(zhuǎn)換為視口對(duì)象?下面是如何計(jì)算它的等效的vw
。
vw = (Pixel Value / Viewport width) * 100
視口寬度用于估計(jì)像素值與所需vw
單位之間的比率。
對(duì)于我們的示例,我們?yōu)?header
添加以下樣式:
.header { border-top: 4px solid #8f7ebc; }
在我的情況下,視口寬度為1440
(這不是固定數(shù)字,請(qǐng)用你自己的數(shù)字替換)
vw = (4 / 1440) * 100 = 0.277
.header { border-top: 0.277vw solid #8f7ebc; }
更好的是,我們可以使用一個(gè)基本像素值,而視口單元可以是一個(gè)附加的。
.header { border-top: calc(2px + 0.138vw) solid $color-main; }
移動(dòng)端滾動(dòng)問題
移動(dòng)設(shè)備中存在一個(gè)常見問題,即使使用100vh
,也會(huì)滾動(dòng),原因是地址欄的高度可見。Louis Hoebregts 寫了一篇關(guān)于這個(gè)問題的文章,并給出了一個(gè)簡(jiǎn)單的解決方案。
.my-element { height: 100vh; /* 不支持自定義屬性的瀏覽器的回退 */ height: calc(var(--vh, 1vh) * 100); }
// 首先,我們得到視口高度,我們乘以 1% 得到一個(gè)vh單位的值 let vh = window.innerHeight * 0.01; // 然后,將`--vh`自定義屬性中的值設(shè)置為文檔的根目錄一個(gè)屬性 document.documentElement.style.setProperty('--vh', `${vh}px`);
以上是“CSS中Viewport單位如何實(shí)現(xiàn)快速布局”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。