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

簡單總結CSS3中視窗單位Viewport的常見用法

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

介紹視窗(Viewport)單位

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

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

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

占用頁面的整個高度

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

CSS Code復制內容到剪貼板
  1. #elem{   
  2.     height: 100%;   
  3. }  

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

CSS Code復制內容到剪貼板
  1. #elem{   
  2.     height: 100vh;   
  3. }  


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

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

我的方法

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

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

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

CSS Code復制內容到剪貼板
  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復制內容到剪貼板
  1. @media screen and (min-width: 1280px) {   
  2.   html {   
  3.     font-size: 100%;   
  4.   }   
  5. }  

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

如果你有任何關于如何改善這個問題的想法，請在評論里讓我知道。我也可以寫一個SCSS的混入，這樣我可以不必輸入這兩個后備和rem單位。

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

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

CSS Code復制內容到剪貼板
  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來設置子元素，那么它會簡單的溢出并采取網(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. }  

響應垂直居中

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

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

CSS Code復制內容到剪貼板
  1. #rectangle{   
  2.     width: 60vw;   
  3.     height: 60vh;   
  4.     margin: 20vh auto;   
  5. }  

等寬列

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

這項技術需要元素用float:left來對齊彼此相鄰的元素：

CSS Code復制內容到剪貼板
  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. }  

總結

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

相關文章

最新評論