css3中有兩個新尺寸單位vw和vh， 這兩個單位非常適合於開發移動端自適應頁面。
假如說有乙個設計師做了一張1136x750px的頁面，這長頁面是針對iphone6的螢幕設計的。 前端開發工程師將這張設計稿轉換成網頁， 網頁中所有的元素尺寸都用px硬編碼， 那麼這張網頁在iphone6中能跑的好好的，但是到了其他手機中會容易出問題， 畢竟很多手機的螢幕尺寸和iphone6是不一樣的。
vw和vh就是用來解決這個問題的。它們是一組相對尺寸單位，和百分比相似， 1vw和1vh其實和1%是一樣的。換句話說， 不管是1136x750px的螢幕還是960*640px或著其他的尺寸的螢幕，它們的寬度都是100vw，高度都是100vh。1136x750的螢幕裡， 1vw = 11.36px，1vh =7.5px；960*640px的螢幕裡， 1vw = 9.6px，1vh = 6.4px。 這跟百分比是一樣的。
但是， vw和vh和百分比最大的差別在於，百分百是相對于父元素的， vw和vh則是相對與根元素的，更確切一點是
<
5 css中vh和vw的屬性
響應式網頁設計技術很大程度上依賴於比例規則。然而，css比例不總是每個問題的最佳解決方案。css寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。vh等於viewport高度的1 100.例如，如果瀏覽器的高是900px,1vh...
css中vw和vh的知識點
引用文件 週六和同事討論問題時，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知識點吧，日後可以自己複習的時候看看。什麼是viewport?視窗的概念在瀏覽器端指的是瀏覽器的可視區域 而在移動端則相對複雜，它涉及到3個視口 layout viewport 布局視口 visual viewpo...
CSS3的vw和vh視口單位
認識視口單位 viewport units 首先，我們要了解什麼是視口。在業界，極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端較為複雜，它涉及到三個視口 分別是 layout vie...