欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單總結(jié)CSS3中視窗單位Viewport的常見用法

w3cplus   發(fā)布時間：2016-02-04 11:31:26   作者：婼籽   我要評論
這篇文章主要介紹了CSS3中視窗單位Viewport的常見用法,包括視窗的高度寬度及垂直居中等基本設(shè)定方法,需要的朋友可以參考下

介紹視窗(Viewport)單位

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

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

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

占用頁面的整個高度

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #elem{   
  2.     height: 100%;   
  3. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #elem{   
  2.     height: 100vh;   
  3. }  


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

盡管這似乎是為響應(yīng)式設(shè)計的一個很有用的單位，但我個人不是它的粉絲。因為它并不能在字體大小上給我更多的控制權(quán)，他總是顯示的過大或過小。

我的方法

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

但是，我發(fā)現(xiàn)這種方式在很大程度上限制了擴展能力。雖然我的字體在中小屏幕上看起來不錯，但他應(yīng)該在大屏幕上有更好的優(yōu)化。即便用戶有放大的選項，這也不應(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. h1 {   
  10.   font-size: 32px;   
  11.   font-size: 3.2rem;   
  12. }  

這樣我擴大了字體大小而只需要這樣寫——

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media screen and (min-width: 1280px) {   
  2.   html {   
  3.     font-size: 100%;   
  4.   }   
  5. }  

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

如果你有任何關(guān)于如何改善這個問題的想法，請在評論里讓我知道。我也可以寫一個SCSS的混入，這樣我可以不必輸入這兩個后備和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è)置居中。

這里有一個高度為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)的大小。所以你可以將它們放在一個比窗口寬的父元素里，但它仍然有網(wǎng)格來保持其應(yīng)有的寬度。這樣來創(chuàng)建全屏滑塊可謂得心應(yī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更加難的解決方案或不可能實現(xiàn)的技術(shù)有非常大的幫助。

相關(guān)文章

最新評論