iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 21
0
自我挑戰組

你看微客=[ 前端領域 - 超入門 ]系列 第 21

RWD---[ 響應式網站 ( 四 ) ]---無用小觀念

  • 分享至 

  • xImage
  •  

響應式網站 ( 四 )

  • 製作響應式網站時,請記得行動優先 ( mobile first )的觀念,不僅是因為行動裝置已經逐漸變成瀏覽 WEB 的主流,更重要的是因為行動裝置的限制較多,無論是螢幕大小或互動方式( 觸控 ),都是比較不容易處理駕馭的,故有必要在設計初期預先考量。
  • hover 事件不易轉換到行動裝置(因為現階段你不太可能用指尖懸在螢幕上不觸碰的方式,來去觸發事件),通常轉換成雙擊的方式來操作 ; 一次點擊視為 hover,快速雙擊才會觸發 click,但這樣的方式操作上不太靈巧,建議儘量避免使用 hover
  • 觸控目標元件的尺寸建議不要小於 44 * 44 像素
  • 可嘗試利用增加目標元素內邊距( padding )的方式增加觸控面積
  • 響應式網站在行動裝置上呈現時,導覽列的位置建議放在螢幕底部,可使手指容易觸控且不易擋到螢幕畫面。
  • 在開始設計之前,請先決定網站主要要支援哪些裝置和瀏覽器,通常都會選擇具代表性的常見裝置,因為實作上你很難把所有的裝置都測試一遍,但這樣做可以確保網站在你選擇的主要裝置上正常運作。

上一篇
RWD---[ 響應式網站 ( 三 ) ]---無用小觀念
下一篇
RWD---[ 響應式網站 ( 五 ) ]---無用小觀念
系列文
你看微客=[ 前端領域 - 超入門 ]30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言