作家
字體：小 中 大 |
|
|
|
| 2014/05/09 14:35:03瀏覽562｜回應0｜推薦1 | |
| 為因應電腦、手機、平板等多元裝置上的前端視窗大小，所謂的視窗(Screen)的變動就會影響前端使用者的使用意願，所以，將網頁設計成可隨者視窗變動的適當的變化，也勢必是一種趨式。Responsive Web Design (響應式網頁設計)就是基於以上的需求而發展出來的。Responsive Web Design最初是由 Ethan Marcotte 所定義出來的一種網頁呈現，該設計可以依照使用者的需求以及使用者的裝置來動態改變外觀(Layout)，例如在手機上可能看到是單欄式的呈現，而在平板上是雙欄的設計。
要開始使用Responsive Web Design來進行網頁設計，大概脫離不了以下四個要點 1. Viewport的設定，即讓Browser明白目前的裝置顯示有多高、多寬。 2. 依照Viewport讓content隨之改變大小 3. 導入CSS的media queries來配合改變 4. 選擇合適的breakpoint Viewport的設定主要的重點如下 • 使用 meta 中的 viewport 標籤來控制 browser viewport 的寬度及尺度 • 引入 width=device-width 來配合裝置上瑩幕的寬度 • 引入 initial-scale=1 來建立裝置上與CSS上pixel的 1:1 對應關係 • 請確認你的頁面沒有鎖定調整尺度的問題 在此要注意的的是在設定 attributes 時記得要用 ; 來切分各個屬性，以利讓較舊的 browser 也適當的解析屬性值 依照Viewport讓content隨之改變大小的重點如下 • 過大的固定元素能避則避之 • 內容不應該只依賴在特定 viewport 的大小之下才能被執行得很好 • 使用 CSS 的 media queries 來針對大小瑩幕的 style 套用 導入CSS的media queries來配合改變的重點如下 • media queries可用於基於各種裝置的特性而去套用CSS樣式 • 儘量使用min-width (而非min-device-width)來確保廣泛的使用者使用經驗會比較好 • 對於element使用相對的大小以避免破壞顯示的版面 選擇合適的breakpoint的重點如下 • breakpoint 的定義原則應該是依 content 而依非特定裝置或品牌來定義 • 設計原則應該由小再依序放大到愈來愈多的可適應大小 • 段落中的文字最好不要過長，能簡化就儘量簡化 以上是最基本的原則。 細節的使用方法，未來 B.K. 會再慢慢的介紹。時間允許的話，會儘量以範例的方式來介紹設計過程。 |
|
| ( 知識學習｜隨堂筆記 ) |
