iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
1
自我挑戰組

30天的切版日記系列 第 2

Day2: RWD斷點

  • 分享至 

  • xImage
  •  

因為前陣子客戶找了外包的設計公司做網頁設計稿,該設計公司主要是做平面設計的,問起了"這網頁可以用手機看嗎? 現在很多人都用手機瀏覽網頁","設計的話像素要怎麼訂呢?"

用了公司常用框架bootstrap斷點來回答, 資料如下:
bs3的breakpoint

bs4的breakpoint

當時反正大概請他給桌機、平板、手機想要設計成什麼樣的設計稿,心想不就是瀏覽器寬度在哪個範圍就會吃什麼css這類的回答嗎...哪有辦法給個什麼精確的平面設計用的像素...另外,通常設斷點不外乎就是找最常見的解析度來處理,像是iPad、iPhone。

接著,想看看其他人怎麼說,就在google下了這搜尋字眼
google斷點
就取第一個來看看 Defining Breakpoints | Responsive Web Design ,其中一點,他大概是說響應式網站該由手機版出發,從最小寬度開始設計,不斷擴大直到你開始覺得醜了就是一個斷點了,用這個方法好處是,一開始就能在小寬度思考什麼是網頁中最重要的內容。
不過實務上,比較常先從pc開始做,且大多數客戶通常是喜歡網頁豐富、內容繁多,甚至有可能之後還想加東西,要討論出什麼是最重要的內容......嗯...都很重要,但這就是另一個問題了。

做個簡單的整理:

  • 現在裝置越來越多了,不管設多少斷點都不太可能會絕對完美。
  • 先由主流的裝置開始設斷點。
  • 可以的話,由手機開始設定斷點。

上一篇
Day1: 起個頭
下一篇
Day3 : 引入reset.css之後
系列文
30天的切版日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言