作家
字體：小 中 大 |
|
|
|
| 2014/06/12 17:23:24瀏覽834｜回應0｜推薦0 | |
| 在設計Responsive Web Page時，依據使用裝置的大小來思考或定義breakpoints可能是有所幫助的，但以這個方向出發時，也需謹慎小心。小心的面向是要提醒各位，別讓breakpoints的設計綁定特定的裝置、產品、某一品牌或特定的作業系統；如果有這樣的做法在設定breakpoints時，其後的影響及維護往往會帶來一定程度的苦痛。
因此，breakpoints的訂定基本功，是透過頁面內容來決定。 尋找一個breakpoints的開始，就是先找出一個頁面內容可以適用的最小瑩幕，然後再往外找尋可擴展成中或大瑩幕的可能性，當那中、大的界限找出，大概也就是breakpoints的選擇點。 範列一(由小開始) 請您去點開第一個範例，這個頁面主要是設計給小頁面使用，還沒有引入breakpoints的設計，當拉大縮小時，大概在600px以下的顯示都很OK，而大於600px時，就可能有漸漸有鬆散的狀態出來。所以600px這個值就可能是合適的breakpoints的切入點。 藉此，就依600px來做breakpoints的定義。 範列二(600px的breakpoints導入) 小於600px的media queries 段落 @media (max-width: 600px) { ...... } 大於601px的media queries 段落 @media (min-width: 601px) { ...... } 範例二導入了breakpoints，各位可以利用檢視網頁原始檔的功能，去看看範例二的CSS內容。主要定義breakpoints在600px，而當然還是利用CSS3的media queries的手法。範例中其它的CSS設定，這裡就不赘述了，主要是一些字型、圖檔顯示的大小定義，但重點是想讓各位瞭解breakpoints的尋找方法。而如果各位夠仔細的話，許或會發現如下的另一個media queries的段落： @media (min-width: 900px) { ...... } 其目的只是要限制在更大的瑩幕上時，內容不要擴展的太過，可以讓畫面在一定的侷限裡。這也是設計頁面的一種概念，而當然，是您有這樣的需要時。 這裡再說明一下關於合適閱讀的內容設計，有一些理論有提到合適的字元數量大概是落在70~80個字元之間(以英文字計算，也就大概是8~10個單字)，所以若是純粹閱讀內容的頁面設計時，提供使用者好的閱讀設計，就要稍微考慮進去。 範列三(閱讀字數的breakpoints) 以範例三的定義，將breakpoints定義在575px @media (min-width: 575px) { article { width: 550px; margin-left: auto; margin-right: auto; } } 再者當瑩幕大於575px時，article的元素鎖在575px，如此一來就可以達到每行閱讀的字數儘量在70~80個字元間。 最後再回到選擇合適的breakpoint的小要點 • breakpoint 的定義原則應該是依 content 而依非特定裝置或品牌來定義 • 設計原則應該由小再依序放大到愈來愈多的可適應大小 • 段落中的文字最好不要過長，能簡化就儘量簡化 |
|
| ( 知識學習｜隨堂筆記 ) |
