0%

[RWD] 響應式網頁 - 常用選單樣式與注意事項

在學習響應式網頁設計(Responsive Web Design)的路上,想記錄一些學習過程跟基礎語法,本篇筆記將從 RWD 常用選單的樣式及實作時的注意事項開始這個系列的旅程。

常用樣式

  • 一行式橫幅選單:每格選單的字數不能太多,文字總寬不能超過載具的寬度,例如一個字大約是 16px,在 iPhone 5 (320px) 上就不能超過 20 字。除了單行排列,也有 3*2 之類多欄多列的排版方式。但不要超過兩行,因為排到三行就占太多版面了。
  • 漢堡選單:點開時覆蓋部分網頁內容,可以用下拉式,也可用從左 / 右方滑出的方式。

實作注意事項

  • 要避免選單點開後把原本網頁內容往下擠的狀況,因為這樣瀏覽器在渲染網頁的時候效能會降低。
  • 抓 320px 為最小值:這是 iPhone 5 、SE 的寬度,大約可以放 20 個字元(一格選項不超過4個字),不過考慮到留白的問題,12~16 個字元就差不多了。
  • 不放奇數選單:3 個選項的選單還可以剛好用 33% 去處理,5 個選項的選單排起來會很尷尬地空一格出來,所以要與客戶溝通。