CSS 做出全螢幕區塊 (Make full screen sections of CSS)

真的是絕招！！！

在 FB 的 F2E 社團看到的，實在是太方便了！無需任何 JavaScript 就可以做到全螢幕(全屏) section (div) 區塊的呈現，對於有心要做 One Page Design 的前端工程師／網頁設計師來說可形容是——絕招！

且最令人開心的是，瀏覽器相容性非常地高，不像 img 的 object-fit 那麼不親民。
現在就可以用！

Magic CSS code

那就別賣關子了，直接秀出這行CSS

section { height: 100vh; }

Browser Capability

全球約有近八成的支援度

What does vh mean?

 Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

1vh 單位代表 1% Viewport 的高度，而 1vw 就代表 1% Viewport 的寬度了，而 vmin 和 vmax 分別代表最小和最大的數值

Demo1 - FullScreen Page

接著來試玩一下吧！
首先來做一個 fullscreen 的 Hello World! 背景是 Blue，前景 White
記得拉動瀏覽器視窗的「高度」來看看它的奇妙所在

Live Demo

你會發現，不管視窗怎麼拖動，我們的區塊永遠維持著高度 100% 貼合的樣子，因為 viewport 代表的是「目前裝置（視窗）的寬高」，也可以說是可視區域範圍的意思。

Demo2 - Two fullscreen Pages

接下來來做二個 section 看看會怎麼樣

html

?

1 2 3 4 5 6

<section class="section1">   <h1>Hello, World!</h1> </section> <section class="section2">   <h1>Second Section</h1> </section>

CSS

?

1 2 3 4 5 6 7

section {   display: block;   height: 100vh;   color: #FFFFFF; } .section1 { background-color: #3C599B; } .section2 { background-color: #527415; }

Live Demo

二個區塊，都是 fullscreen，scrollbar 往下拉至底，就是另一個完全貼合的全螢幕區塊，完全不用去計算，就可以達到這樣的效果！

只需要用幾行 JavaScript Code 來做 sections 之間的移動切換，就可以很容易地做出 One Page Design! Bravo!

Demo3 - One Fourth Section

來做四個，每一個 section 寬高各佔 50vh ，每一個各佔四分之一個 screen

CSS

?

1 2 3 4 5

section {   width: 50%;   height: 50vh;   float: left; }

Live Demo

是不是很好玩啊？哈哈，以往要做這樣的效果，要煞費苦心，採用 JavaScript runtime 去呼叫 window object 來計算再重置 div 的高度，現在只要一行 CSS Code 就搞定，真的很方便。

這種新的單位值(vh, vw)，在 Responsive Web Design(RWD) 也是需要用到的，像是平板或是較小的手機視窗，One Page Deisgn 要考量到的是僅僅一個頁面，內容要怎麼去編排。舉例來說 1920*1080 的解析度下，我的標題字級可以設到 40px 甚至更大，但在平板的 1024*768 或者是更小的手機，雖同樣都是 One Page 但 Viewport Area 差異頗多，因此也要使用 Media Query 設置 CSS 來讓你的 One Page Design 更加完美。

好啦，今天就玩到這裡，希望你也跟我一樣喜歡這個新的發現！

文章出處： http://blog.yam.com/hanasan/article/81767301