iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
0
Modern Web

無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)系列 第 13

[day13]-好的網站和好的建築一樣,先打造好地基!頁面寬高的單位(vh、vw、%)篇

續上篇[day12]好的網站和好的建築一樣,先打造好地基!Html5的架構&CSS3的裝飾,講解了格線系統的運作,第13天來寫我們個人網站RWD的電腦版


我們用第12天做好的DEMO來改程式碼比較快,在第9天時我們設計了簡單的版型,現在逐一來測量網頁layout的間距等....

http://ithelp.ithome.com.tw/upload/images/20161219/20103130qsl5DWU4tM.png

我設定的頁面大小為1440px * 900px,可從上圖上可見初步的規劃:

灰色框框(border)上下為30px左右為25px先抓layout的尺寸去coding,但一切以瀏覽器看見的為主,隨時可在調作更動~

版面以一個div做為body來使用(個人作法啦~XD),灰色框框為#body的邊框

#body {
        width: 100%;
        height: 100vh;
        border-color: rgba(204, 204, 204, 1);
        border-style: solid;
        border-width: 30px 25px 30px 25px;
        position: relative;
        top: 0;
        left: 0;
    }

http://ithelp.ithome.com.tw/upload/images/20161219/20103130itYM82a99W.png

**這邊想必前端人一定都知道的網站:w3school裡面有非常多的範例與教學!**有問題時可去那常常看樣式屬性或有的沒的~

其中CSS Border樣式寫到

Border Width

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

邊框的四個邊都可分別設定,可以一次設定四個邊的值,設定值分別為

(記法為順時針設定)
border-width:上邊框, 右邊框, 下邊框, 左邊框


格線系統主要是認寬度來辨識device的大小;

所以div#body的寬 我沒有設固定的寬度,而是改用百分比來作計算

至於高度

因為頁面寬已經給了百分比的數值(彈性數值)給他,這邊沒有給他明確的值「多少為百分之百」,這時候高度就要給他一個「明確的數值」來讓寬度知道多少為百分之百,所以這邊高度我設定為100vh

為什麼不是使用px值呢?

因為如果我使用了固定的px數,想必大家有編輯圖片時圖片的比例跑掉的經驗~/images/emoticon/emoticon16.gif
寬度是彈性的值而高度卻是固定值就會和圖片比例跑掉一樣,在網頁上呈現的也是如此!

這時候請善用CSS3的新單位「vhvw」這兩個單位分別為可視視窗高(view height)及可視視窗寬(view width);

vh 與 vw 既有確實的數值存在,也有彈性的數值性質存在!

舉例來說:

● 設定A標籤高度50vh,瀏覽器的視窗高度1000px
A標籤的高度等於視窗高度的一半 → 1000px * 50% = 500px→【 A標籤的高度為500px

● 假如A標籤設定高度改為100vh,瀏覽器的視窗還是一樣高度1000px
A標籤高度就等於視窗的高度 → 1000px

這就是為什麼我的頁面高不用px值,改運用vh這個新單位來作我的頁面高,因為他既有確實的數值又有彈性的性質在 ← 重要所以又說了一次!!/images/emoticon/emoticon30.gif

那今天首頁先講解到此好了~謝謝大大們耐心的收看!!/images/emoticon/emoticon41.gif


文後-

對不起我脫稿了....請大家多多原諒..../images/emoticon/emoticon20.gif

同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]


上一篇
[day12]-好的網站和好的建築一樣,先打造好地基!-格線系統(Grid System)篇
下一篇
[day14]-改變策略!之手刻網頁使用@media製作RWD個人網站-電腦版
系列文
無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言