【行動網頁規劃】Responsitive Design 實戰設計 (I) HTML5

Hi! 各位朋友好,我是小蔡老師,延續上一個單元基本CSS排版製作,今天我們要講述目前較為流行的新網頁樣板的做法,目前通稱為Responsitive Design 也就是響應式網站,這類型簡單說就是做一版就可以在不同裝置上面呈現不同的網站樣板,在這邊小蔡老師會分成五個單元來簡述做法

首先在一開始,我們先同樣先以基本版型簡單的製作,目標如下圖顯示
011

步驟1. 建置一個HTML5檔案
001

步驟2.
002

說明:
viewport屬性可分為下列:
width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例
minimum-scale:允許縮小最小比例
maximum-scale:允許放大最大比例
user-scalable:允許使用者縮放,1 or 0 (yes or no)

◎ width=device-width
先提一下幾個注意的地方,首先在 viewport 裡面的 width 通常會看到設定為device-width ,主要是為了讓整個頁面寬度與手機可視寬度相同,如此就可以簡單相容於不同機型螢幕大小,如果這邊width 沒有設定的話,就會依照 html css 給予的 width 當作預設值。

◎ user-scalable
從屬性名稱來看就是允許開啟、關閉的設定,使用者能否放大、縮小頁面,如果頁面不允許手機使用者縮放,就直接設定為 0,或者 no,反之要啟動縮放功能,給予 1或者是 yes。

步驟3.瀏覽器相容性問題,HTML5+CSS3的網頁物件並非目前所有流覽器都有支援,故需要HTML CODE的附加Script來輔助解決相容性問題,但也不是每一階級流覽器都有辦法百分百相容這點仍要注意一下‧
003
(點圖可以放大)

步驟4. 傳統CSS網頁排版(上一單元有詳述)
004

下一頁

我想發問