認識視口單位（ viewport units )
首先，我們要了解什麼是視口。
在業界，極為推崇的一種理論是 peter-paul koch (江湖人稱「ppk大神」)提出的關於視口的
解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端較為複雜，它涉及到三個視口：分別是 layout viewport（布局視口）、 visual viewport（視覺視口）、ideal viewport。
而視口單位中的「視口」，在桌面端，毫無疑問指的就是瀏覽器的可視區域；但是在移動端，它指的則是三個 viewport 中的 layout viewport 。
視口單位中的「視口」
·根據css3規範
，視口單位主要包括以下4個：
視口單位區別於%單位，視口單位是依賴於視口的尺寸，根據視口尺寸的百分比來定義的；而%單位則是依賴於元素的祖先元素。
用視口單位度量，視口寬度為100vw，高度為100vh（左側為豎屏情況，右側為橫屏情況）
例如，在桌面端瀏覽器視口尺寸為650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支援0.5px，那麼實際渲染結果可能是7px）。
相容性
其相容性如下圖所示，可以知道：在移動端
ios8 以上以及
android
截圖來自
can i use
css中的幾個單位 rem，視口單位和ch
rem是設計響應式網頁的神器，因為rem單位是相對html元素的font size屬性的，因此當使用rem作為屬性單位時，當改變html元素的font size，其他使用rem作為單位的元素也會跟著適配大小。那麼如何根據螢幕的大小製作乙個響應式的網頁呢。這裡先說說用css 查詢，如下面所示，螢幕查詢...
css3單位使用vh擺脫父級元素高度
在給元素設定高度時，一般使用px，但是當父類元素沒有設定height時，子類設定height 是沒有高度的。main元素沒有高度沒設定，導致layout 1ow jp元素設定了高度為100 也沒有撐開，現有高度還是button元素的高度 遇到這樣的情況，只有從根元素開始 html，body，root...
5 css中vh和vw的屬性
響應式網頁設計技術很大程度上依賴於比例規則。然而，css比例不總是每個問題的最佳解決方案。css寬度是相對於最近的包含父元素。如果你想使用顯示視窗的寬度或高度而不是父元素的寬度將會怎麼樣？這正是vh和vw單位所提供的。vh等於viewport高度的1 100.例如，如果瀏覽器的高是900px,1vh...