CSS3中視窗單位Viewport的常見用法有哪些，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
創(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)是你的瀏覽器實(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)容到剪貼板
#elem{
height: 100%;
}
然而，除非我們?yōu)閔tml和body添加100%的高度，但只是這樣還是不行的，因?yàn)檫@樣的代碼并不優(yōu)雅而且很有可能會(huì)破壞你的設(shè)計(jì)的其余部分。使用vh就變得相當(dāng)容易了，只需要為高度設(shè)置100vh，那它將永遠(yuǎn)都是你窗口的高度。
CSS Code復(fù)制內(nèi)容到剪貼板
#elem{
height: 100vh;
}
視口寬度大小
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)容到剪貼板
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h2 {
font-size: 32px;
font-size: 3.2rem;
}
這樣我擴(kuò)大了字體大小而只需要這樣寫——
CSS Code復(fù)制內(nèi)容到剪貼板
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
這個(gè)方法是用像素作為降級(jí)單位因?yàn)镮E8及以下不支持rem。這有一個(gè)問題是當(dāng)我改變基礎(chǔ)字體大小時(shí)只能應(yīng)用在可擴(kuò)展性大小上面而不適用于后備字體大小。不過我不認(rèn)為這是一個(gè)巨大的問題，因?yàn)檫@個(gè)問題對(duì)于較大規(guī)模的設(shè)備的核心來說只是一個(gè)額外的問題。
如果你有任何關(guān)于如何改善這個(gè)問題的想法，請(qǐng)?jiān)谠u(píng)論里讓我知道。我也可以寫一個(gè)SCSS的混入，這樣我可以不必輸入這兩個(gè)后備和rem單位。
子元素大小根據(jù)瀏覽器改變而不是父元素
在某些情況下，你想要的是子元素的大小相對(duì)于窗口改變而不是父元素。同樣的，按照前面的例子，這樣是不行的：
CSS Code復(fù)制內(nèi)容到剪貼板
#parent{
width: 400px;
}
#child{
/* This is equal to 100% of the parent width, not the whole page. */
width: 100%;
}
如果我們用vw來設(shè)置子元素，那么它會(huì)簡單的溢出并采取網(wǎng)頁的全寬：
#parent{
width: 400px;
}
#child{
/* This is equal to 100% of page, regardless of the parent size. */
width: 100vw;
}
響應(yīng)垂直居中
通過設(shè)置元素的width,height和margin的視窗(Viewport)單位，你可以不使用任何其它技巧來設(shè)置居中。
這里有一個(gè)高度為60vh 上下外邊距為20vh的矩形，它們加起來是100vh(60+2*20)，使它即便調(diào)整窗口大小也可以始終居中。
CSS Code復(fù)制內(nèi)容到剪貼板
#rectangle{
width: 60vw;
height: 60vh;
margin: 20vh auto;
}
等寬列
你可以使用視窗(Viewport)單位來設(shè)置響應(yīng)式網(wǎng)格。它們的行為類似于百分比但總是相對(duì)于視窗(Viewport)的大小。所以你可以將它們放在一個(gè)比窗口寬的父元素里，但它仍然有網(wǎng)格來保持其應(yīng)有的寬度。這樣來創(chuàng)建全屏滑塊可謂得心應(yīng)手。
這項(xiàng)技術(shù)需要元素用float:left來對(duì)齊彼此相鄰的元素：
CSS Code復(fù)制內(nèi)容到剪貼板
.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width: 25vw;
}
.column-8{
float: left;
width: 12.5vw;
}
總結(jié)
視窗(Viewport)單位有它的用途而且值得嘗試。它們易于理解，而且在某些情況下對(duì)于代替CSS更加難的解決方案或不可能實(shí)現(xiàn)的技術(shù)有非常大的幫助。
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
重慶分公司
重慶分公司
