CSS中視窗單位和百分比單位的使用方法

本篇內(nèi)容主要講解“CSS中視窗單位和百分比單位的使用方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS中視窗單位和百分比單位的使用方法”吧!

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比樂清網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式樂清網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋樂清地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

視窗(Viewport)單位

視窗(Viewport)單位是相對(duì)單位，意味著它們沒有客觀的尺寸。它們的大小是由視窗(Viewport)大小決定的。下面是四個(gè)與視窗(Viewport)有關(guān)的單位。

我將集中討論前兩個(gè)單位，因?yàn)樗鼈兏赡鼙皇褂谩?/p>

在很多情況下，視口單位(vh和vw)和百分比單位在它們可以實(shí)現(xiàn)的功能方面是重疊的。然而，它們每個(gè)都有其明顯的優(yōu)點(diǎn)和缺點(diǎn)。概括的說:

    當(dāng)處理寬度的時(shí)候，%單位更合適。處理高度的時(shí)候，vh單位更好。

占滿寬度的元素: % > vw

正如我所提到的，vw單位根據(jù)視窗的寬度決定它的大小。然而，瀏覽器是根據(jù)瀏覽器的窗口計(jì)算視窗大小的，包括了滾動(dòng)條的空間。

如果頁面延伸超過視口的高度——滾動(dòng)條出現(xiàn)——視窗的寬度將會(huì)大于html元素的寬度。

Viewport > html > body

因此，如果你將一個(gè)元素設(shè)置為100vw,這個(gè)元素將會(huì)延伸到html和body元素范圍之外。在這個(gè)例子中，我用紅色邊框包裹html元素，然后給section元素設(shè)置背景顏色。

因?yàn)檫@個(gè)細(xì)微的差別，當(dāng)使一個(gè)元素橫跨整個(gè)頁面的寬度時(shí)，最好使用百分比單位而不是視口的寬度。
占滿高度的元素:vh > %

在另一方面，當(dāng)使一個(gè)元素跨越整個(gè)頁面的高度時(shí)，vh遠(yuǎn)比百分比單位好。

因?yàn)橛冒俜直榷x的元素的大小是由它的父元素決定的，只有父元素也填滿整個(gè)屏幕的高度時(shí)我們才能擁有一個(gè)填滿整個(gè)屏幕的高度的元素。這通常意味著我們不得不把元素定位成固定的，為了使元素的父元素為html元素，或者依賴一些程序。

然而，用vh的話，就像下面寫的那么簡(jiǎn)單：

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

1. .example {   

2.   height: 100vh;   

3. }  

不管.example元素如何嵌套，它還是能夠相對(duì)于視窗尺寸設(shè)置大小。滾動(dòng)條的問題也不是一個(gè)問題，因?yàn)楝F(xiàn)在大多數(shù)頁面通常不會(huì)有水平滾動(dòng)條。

這里有一些我們可以如何使用vh單位來輕松的創(chuàng)造一些設(shè)計(jì)的例子。
全屏的背景圖片

vh單位一個(gè)典型的用途是用來創(chuàng)建一個(gè)橫跨整個(gè)屏幕高度和寬度的背景圖片，不管設(shè)備的大小。這用vh很容易實(shí)現(xiàn):

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

1. .bg {   

2.   position: relative;   

3.   background: url('bg.jpg') center/cover;   

4.   width: 100%;   

5.   height: 100vh;   

6. }  

占滿全屏的內(nèi)容塊像“多頁面”一樣

同樣地，我們也可以實(shí)現(xiàn)有“多頁面”的效果，通過使頁面的每個(gè)內(nèi)容塊跨越視口的整個(gè)高度和寬度。

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

1. section {   

2.   width: 100%;   

3.   height: 100vh;   

4. }  

我們可以用javascript來實(shí)現(xiàn)翻動(dòng)頁面的錯(cuò)覺。

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

1. $('nav').on('click', function() {   

2.   

3.   if ( $(this).hasClass('down') ) {   

4.     var movePos = $(window).scrollTop() + $(window).height();   

5.   }   

6.   if ( $(this).hasClass('up') ) {   

7.     var movePos = $(window).scrollTop() - $(window).height();   

8.   }   

9.   

10.   $('html, body').animate({   

11.     scrollTop: movePos   

12.   }, 1000);   

13. })  

在區(qū)域內(nèi)的圖片

vh單位也可以用來控制在頁面內(nèi)的圖片的大小。例如，在一篇文章中，我們可能想要任何的圖片可以在頁面上被完整的查看，不過屏幕的大小為多少。

做到這一點(diǎn)，我們可以這樣解決:

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

1. img {   

2.       width: auto; /* 圖片寬度根據(jù)高度按比例調(diào)整*/  

3.       max-width: 100%; /* 圖片不超過父元素的寬度 */  

4.       max-height: 90vh; /* 圖片不超過視口的高度 */  

5.   

6.       margin: 2rem auto;    

7.     }  

瀏覽器的支持情況

因?yàn)檫@些單位相對(duì)較新，一些瀏覽器中使用仍有一些問題。這里就是如何解決這些問題 ——

到此，相信大家對(duì)“CSS中視窗單位和百分比單位的使用方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：CSS中視窗單位和百分比單位的使用方法
URL分享：http://www.muchs.cn/article22/ghoijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、App開發(fā)、云服務(wù)器、網(wǎng)站建設(shè)、商城網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)