CSS3中視窗單位Viewport的常見用法有哪些

CSS3中視窗單位Viewport的常見用法有哪些，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

介紹視窗(Viewport)單位

視窗(Viewport)是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域——換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表了瀏覽器（視窗(Viewport)）尺寸的比例和窗口大小調(diào)整產(chǎn)生的規(guī)模改變。

比方說我們有一個(gè)1000px（寬）和800px（高）的視窗(Viewport)

vw——代表視窗(Viewport)的寬度為1%，在我們的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是當(dāng)前vw和vh中較小的值。在我們的例子里因?yàn)槭菣M向模式，所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一個(gè)可以使用像素值的地方使用它們，比如width,height,margin,font-size等等。它們將通過窗口大小的調(diào)整或旋轉(zhuǎn)設(shè)備的瀏覽器來重新計(jì)算這些值。

占用頁面的整個(gè)高度

每一個(gè)前端開發(fā)人員都致力于這件事。你的第一直覺是這樣做：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #elem{   

2.     height: 100%;   

3. }  

然而，除非我們?yōu)閔tml和body添加100%的高度，但只是這樣還是不行的，因?yàn)檫@樣的代碼并不優(yōu)雅而且很有可能會破壞你的設(shè)計(jì)的其余部分。使用vh就變得相當(dāng)容易了，只需要為高度設(shè)置100vh，那它將永遠(yuǎn)都是你窗口的高度。

CSS Code復(fù)制內(nèi)容到剪貼板

1. #elem{   

2.     height: 100vh;   

3. }  

視口寬度大小
vw是CSS3新加入的一個(gè)使用視口寬度來計(jì)算字體大小的單位。這樣可以允許更多的響應(yīng)字體大小。

盡管這似乎是為響應(yīng)式設(shè)計(jì)的一個(gè)很有用的單位，但我個(gè)人不是它的粉絲。因?yàn)樗⒉荒茉谧煮w大小上給我更多的控制權(quán)，他總是顯示的過大或過小。

我的方法

在我做這項(xiàng)研究之前，我一直使用像素來設(shè)置我的字體大小。這是因?yàn)楝F(xiàn)在的大多數(shù)瀏覽器允許用戶在字體太小的情況下自行放大頁面，所以使用像素并沒有什么問題。

但是，我發(fā)現(xiàn)這種方式在很大程度上限制了擴(kuò)展能力。雖然我的字體在中小屏幕上看起來不錯(cuò)，但他應(yīng)該在大屏幕上有更好的優(yōu)化。即便用戶有放大的選項(xiàng)，這也不應(yīng)該是我們希望他們來做的事情。

因此我使用rem設(shè)置的解決方案是(使用像素作為備用)。

CSS Code復(fù)制內(nèi)容到剪貼板

1. html {   

2.   font-size: 62.5%; /* sets the base font to 10px for easier math */  

3. }   

4. body {   

5.   font-size: 16px;   

6.   font-size: 1.6rem;   

7.   /* sets the default sizing to make sure nothing is actually 10px */  

8. }   

9. h2 {   

10.   font-size: 32px;   

11.   font-size: 3.2rem;   

12. }  

這樣我擴(kuò)大了字體大小而只需要這樣寫——

CSS Code復(fù)制內(nèi)容到剪貼板

1. @media screen and (min-width: 1280px) {   

2.   html {   

3.     font-size: 100%;   

4.   }   

5. }  

這個(gè)方法是用像素作為降級單位因?yàn)镮E8及以下不支持rem。這有一個(gè)問題是當(dāng)我改變基礎(chǔ)字體大小時(shí)只能應(yīng)用在可擴(kuò)展性大小上面而不適用于后備字體大小。不過我不認(rèn)為這是一個(gè)巨大的問題，因?yàn)檫@個(gè)問題對于較大規(guī)模的設(shè)備的核心來說只是一個(gè)額外的問題。

如果你有任何關(guān)于如何改善這個(gè)問題的想法，請?jiān)谠u論里讓我知道。我也可以寫一個(gè)SCSS的混入，這樣我可以不必輸入這兩個(gè)后備和rem單位。

子元素大小根據(jù)瀏覽器改變而不是父元素

在某些情況下，你想要的是子元素的大小相對于窗口改變而不是父元素。同樣的，按照前面的例子，這樣是不行的：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #parent{   

2.     width: 400px;   

3. }   

4. #child{   

5.     /* This is equal to 100% of the parent width, not the whole page. */  

6.     width: 100%;   

7. }   

8. 如果我們用vw來設(shè)置子元素，那么它會簡單的溢出并采取網(wǎng)頁的全寬：   

9.   

10. #parent{   

11.     width: 400px;   

12. }   

13. #child{   

14.     /* This is equal to 100% of page, regardless of the parent size. */  

15.     width: 100vw;   

16. }  

響應(yīng)垂直居中

通過設(shè)置元素的width,height和margin的視窗(Viewport)單位，你可以不使用任何其它技巧來設(shè)置居中。

這里有一個(gè)高度為60vh 上下外邊距為20vh的矩形，它們加起來是100vh(60+2*20)，使它即便調(diào)整窗口大小也可以始終居中。

CSS Code復(fù)制內(nèi)容到剪貼板

1. #rectangle{   

2.     width: 60vw;   

3.     height: 60vh;   

4.     margin: 20vh auto;   

5. }  

等寬列

你可以使用視窗(Viewport)單位來設(shè)置響應(yīng)式網(wǎng)格。它們的行為類似于百分比但總是相對于視窗(Viewport)的大小。所以你可以將它們放在一個(gè)比窗口寬的父元素里，但它仍然有網(wǎng)格來保持其應(yīng)有的寬度。這樣來創(chuàng)建全屏滑塊可謂得心應(yīng)手。

這項(xiàng)技術(shù)需要元素用float:left來對齊彼此相鄰的元素：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .column-2{   

2.     float: left;   

3.     width: 50vw;   

4. }   

5. .column-4{   

6.     float: left;   

7.     width: 25vw;   

8. }   

9. .column-8{   

10.     float: left;   

11.     width: 12.5vw;   

12. }  

總結(jié)

視窗(Viewport)單位有它的用途而且值得嘗試。它們易于理解，而且在某些情況下對于代替CSS更加難的解決方案或不可能實(shí)現(xiàn)的技術(shù)有非常大的幫助。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。