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

介紹視窗(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ā)人員都致力于這件事。你的第一直覺是這樣做:
- #elem{
- height: 100%;
- }
然而,除非我們?yōu)閔tml和body添加100%的高度,但只是這樣還是不行的,因為這樣的代碼并不優(yōu)雅而且很有可能會破壞你的設(shè)計的其余部分。使用vh就變得相當(dāng)容易了,只需要為高度設(shè)置100vh,那它將永遠都是你窗口的高度。
- #elem{
- height: 100vh;
- }
視口寬度大小
vw是CSS3新加入的一個使用視口寬度來計算字體大小的單位。這樣可以允許更多的響應(yīng)字體大小。
盡管這似乎是為響應(yīng)式設(shè)計的一個很有用的單位,但我個人不是它的粉絲。因為它并不能在字體大小上給我更多的控制權(quán),他總是顯示的過大或過小。
我的方法
在我做這項研究之前,我一直使用像素來設(shè)置我的字體大小。這是因為現(xiàn)在的大多數(shù)瀏覽器允許用戶在字體太小的情況下自行放大頁面,所以使用像素并沒有什么問題。
但是,我發(fā)現(xiàn)這種方式在很大程度上限制了擴展能力。雖然我的字體在中小屏幕上看起來不錯,但他應(yīng)該在大屏幕上有更好的優(yōu)化。即便用戶有放大的選項,這也不應(yīng)該是我們希望他們來做的事情。
因此我使用rem設(shè)置的解決方案是(使用像素作為備用)。
- 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 */
- }
- h1 {
- font-size: 32px;
- font-size: 3.2rem;
- }
這樣我擴大了字體大小而只需要這樣寫——
- @media screen and (min-width: 1280px) {
- html {
- font-size: 100%;
- }
- }
這個方法是用像素作為降級單位因為IE8及以下不支持rem。這有一個問題是當(dāng)我改變基礎(chǔ)字體大小時只能應(yīng)用在可擴展性大小上面而不適用于后備字體大小。不過我不認為這是一個巨大的問題,因為這個問題對于較大規(guī)模的設(shè)備的核心來說只是一個額外的問題。
如果你有任何關(guān)于如何改善這個問題的想法,請在評論里讓我知道。我也可以寫一個SCSS的混入,這樣我可以不必輸入這兩個后備和rem單位。
子元素大小根據(jù)瀏覽器改變而不是父元素
在某些情況下,你想要的是子元素的大小相對于窗口改變而不是父元素。同樣的,按照前面的例子,這樣是不行的:
- #parent{
- width: 400px;
- }
- #child{
- /* This is equal to 100% of the parent width, not the whole page. */
- width: 100%;
- }
- 如果我們用vw來設(shè)置子元素,那么它會簡單的溢出并采取網(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è)置居中。
這里有一個高度為60vh 上下外邊距為20vh的矩形,它們加起來是100vh(60+2*20),使它即便調(diào)整窗口大小也可以始終居中。
- #rectangle{
- width: 60vw;
- height: 60vh;
- margin: 20vh auto;
- }
等寬列
你可以使用視窗(Viewport)單位來設(shè)置響應(yīng)式網(wǎng)格。它們的行為類似于百分比但總是相對于視窗(Viewport)的大小。所以你可以將它們放在一個比窗口寬的父元素里,但它仍然有網(wǎng)格來保持其應(yīng)有的寬度。這樣來創(chuàng)建全屏滑塊可謂得心應(yīng)手。
這項技術(shù)需要元素用float:left來對齊彼此相鄰的元素:
- .column-2{
- float: left;
- width: 50vw;
- }
- .column-4{
- float: left;
- width: 25vw;
- }
- .column-8{
- float: left;
- width: 12.5vw;
- }
總結(jié)
視窗(Viewport)單位有它的用途而且值得嘗試。它們易于理解,而且在某些情況下對于代替CSS更加難的解決方案或不可能實現(xiàn)的技術(shù)有非常大的幫助。
相關(guān)文章
像素密度與CSS3的viewport在移動端Web響應(yīng)式布局中的運用
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動端Web界面的操作與布局,接下來我們就來詳解像素密度與CSS3的viewport在移動端web響應(yīng)式布局中的運用.2016-05-27HTML5移動端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析
這篇文章主要介紹了HTML5移動端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析,Viewport常被叫做視口或視區(qū),在移動端布局和屏幕適配中有著重要的作用,需要的朋友可以參考下2016-04-15網(wǎng)頁寬度自動適應(yīng)手機屏幕寬度的實現(xiàn)代碼(viewport)
這篇文章主要介紹了網(wǎng)頁寬度自動適應(yīng)手機屏幕寬度的實現(xiàn)代碼,需要的朋友可以參考下2015-08-11meta標(biāo)簽中的viewport控制設(shè)備屏幕css
meta標(biāo)簽中的viewport可以控制設(shè)備屏幕的高度、寬度、初始的縮放比例等等,喜歡的朋友可以了解下2014-08-22meta標(biāo)簽中的使用viewport定義屏幕css
meta標(biāo)簽中的viewport可以設(shè)置屏幕的css樣式,包括寬、高、初始縮放比例等等2014-07-28html網(wǎng)頁中meta viewport屬性說明
這篇文章主要介紹了html網(wǎng)頁中meta viewport屬性說明,需要的朋友可以參考下2014-05-07- 這篇文章主要介紹了html的meta viewport屬性說明,需要的朋友可以參考下2014-04-16
- viewport并非只是ios上的獨有屬性,在android、winphone上同樣也有viewport,下面為大家詳細介紹下HTML meta viewport2014-03-12
- 隨著高端手機(Andriod,Iphone,Ipod,WinPhone等)的盛行,移動互聯(lián)應(yīng)用開發(fā)也越來越受到人們的重視,用html5開發(fā)移動應(yīng)用是最好的選擇。然而,每一款手機有不同的分辨率,不2013-12-02
- 在需要調(diào)整設(shè)備瀏覽器的viewport時,我們通常在HTML中使用來解決。但是令人意想不到的是,viewport meta標(biāo)簽并不具有“規(guī)范性”,即它不是W3C的正式標(biāo)準,也非Web標(biāo)準2013-11-10