技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2017 iT 邦幫忙鐵人賽
DAY
21
0
自我挑戰組
你看微客=[ 前端領域 - 超入門 ]
系列 第
21
篇
RWD---[ 響應式網站 ( 四 ) ]---無用小觀念
2017鐵人賽
ucvic
2017-01-02 17:43:18
1979 瀏覽
分享至
響應式網站 ( 四 )
製作響應式網站時,請記得
行動優先
(
mobile first
)的觀念,不僅是因為行動裝置已經逐漸變成瀏覽 WEB 的主流,更重要的是因為行動裝置的限制較多,無論是螢幕大小或互動方式( 觸控 ),都是比較不容易處理駕馭的,故有必要在設計初期預先考量。
hover 事件不易轉換到行動裝置(因為現階段你不太可能用指尖懸在螢幕上不觸碰的方式,來去觸發事件),通常轉換成雙擊的方式來操作 ; 一次點擊視為 hover,快速雙擊才會觸發 click,但這樣的方式操作上不太靈巧,
建議儘量避免使用 hover
。
觸控目標元件的尺寸建議不要小於 44 * 44 像素
。
可嘗試
利用增加目標元素內邊距( padding )的方式增加觸控面積
。
響應式網站在行動裝置上呈現時,
導覽列的位置建議放在螢幕底部
,可使手指容易觸控且不易擋到螢幕畫面。
在開始設計之前,請先決定網站主要要支援哪些裝置和瀏覽器,通常都會選擇具代表性的常見裝置
,因為實作上你很難把所有的裝置都測試一遍,但這樣做可以確保網站在你選擇的主要裝置上正常運作。
留言
追蹤
檢舉
上一篇
RWD---[ 響應式網站 ( 三 ) ]---無用小觀念
下一篇
RWD---[ 響應式網站 ( 五 ) ]---無用小觀念
系列文
你看微客=[ 前端領域 - 超入門 ]
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
React---[ 自訂元件、props特性 ]---無用小觀念
27
React---[ state 狀態、事件處理 ]---無用小觀念
28
React---[ JSX ]---無用小觀念
29
Git---[ Git 基本觀念 ]
30
30天鐵人賽---[ 參賽心得 ]
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
10953
篇
完賽人數
102
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
17th鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
HP iLo Advanced trial license
在線求大神,千奧軟體主機怎麼安裝
因為網路磁碟的關係造成系統自動重新開機
Docker Compose 建立 GitLab 容器,執行器 Runner 運行流水線問題
windows server無法使用gpedit.msc
Java證照題目(main() method)
iatf16949資訊稽核
iatf16949資訊稽核內容
熱門回答
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
因為網路磁碟的關係造成系統自動重新開機
iatf16949資訊稽核
windows server無法使用gpedit.msc
熱門文章
第4天,數位憑證的產生 / 中崙張記藥膳排骨 排骨讚(台北松山)| 30天滷肉飯
第4天,Cloudflare Public DNS 與 WARP / 滷小小 美味的滷味 | 30天板橋湳雅夜市
[為你自己學 n8n] 第 4 天,節點大師之路:產生寶可夢、篩選、算戰力!
Day 17- 分離關注點:設定與主要邏輯分開
第5天,數位憑證的格式 PEM、DER / 小辣椒魷魚羹(台北萬華)| 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}