關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356395

    累積人氣

  • 26

    今日人氣

    3

    追蹤人氣

用一行 CSS 做出全螢幕區塊 (Make full screen sections with 1 line of CSS)

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


Hello, World!

Second Section

CSS

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

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 更加完美。

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

參考來源(source)

https://medium.com/@ckor/make-full-screen-sections-with-1-line-of-css-b82227c75cbd
相簿設定
標籤設定
相簿狀態