iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
自我挑戰組

網頁排版個人學習筆記系列 第 24

RWD|斷點(breakpoint)規劃

替客戶設計響應式斷點?

  • 眼球看東西的區域有限,所以一般設計網頁,中間區塊還是會固定一個尺寸(如下方"背景滿版,內容設定寬度水平置中範例")
    • 常見的解析度(中間區塊): 960px、1000px、1440px(較少)
    • 由於太多圖片一次下載網頁會頓頓的,所以通常不會版開太大(例如: 1920px)
  • 有舊網站時,先套Google 分析觀察數據
  • 如果沒有,以最熱門的解析度為主
    • statcounter:可查詢各國目前瀏覽器與裝置的趨勢

Desktop first 範例

  • CSS順序: 桌機→平板→手機
  • media query呈現方式會是max-width
  • .wrap設定max-width

Mobile first 範例

  • CSS順序: 手機→平板→桌機
  • media query呈現方式會是min-width
  • .wrap不設寬度

※ 哪個瀏覽器先寫在前方,那個設備的靈活度會是最高的,所以做網站前要先了解此網站的瀏覽者pc多或手機多,再從此設備先寫起

如果先從 PC 做的話,PC 在建構上會比較彈性,而手機若是要新增樣式就會局現在因為是 PC 先做,導致手機要做額外樣式就會受限於 PC 的關係而綁手綁腳。畢竟手機是 藉由 PC原本樣式而慢慢覆蓋,自然彈性就較小。
結論就是先做哪個版本,該版本就比較靈活,而被覆蓋後才產生出來的樣式就會因此而受限。原文出處-六角學院課程問答區


網頁中背景滿版,內容設定寬度水平置中方式

網頁中背景滿版,內容設定寬度水平置中方式示意圖

  • 範例
  • 設定header背景色,呈現滿版自適應
    • 因為沒設定wrap所以header就會跟著body做自適應延伸
  • 內容不想自適應延伸至滿版,可設定.container 如下
    • html中套上class container的區域就會寬度固定於768px並水平置中
.container {
    width: 768px;
    margin: 0 auto;
}
  • 自我練習 範例
    • header區塊加入logo與menu(注意clearfix部分)
    • contain與footer,呈現背景滿版內容區塊限制於特定範圍

六角講師斷點設計分享 原出處

iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px
/
有學生應該會很好奇,
為什麼 還會有一個 767px 的斷點,
因為通常 iPad 直式 是 Android、IOS 平版很常見的大小,
再接著 767px~320px 我便會視為他們都是手機 size,
所以在 767 px 以下時就會直接把他變成手機版型,
畢竟 767px~6xx size 相當少見,一開始各位學生可以先確保一些熱門斷點上優化即可,
至少可以滿足 80% 以上的客戶,
不用太吹毛求疵,當然你力求優化的話也是 ok 的。

再來 320px 是你最小需要注意的 SIZE,
現在仍然有許多手機是 320px,尤其是小 size 的 iPhone,
以前甚至有 240px 的手機,但現在已經相當稀有了。

所以如果是 PC 做到手機的話,語法就會有點像是這樣:

.wrap{
  max-width: 960px;
}
.header {
  height: 80px;
}
.list li{
  width: 33%;
}
.list h3{
  font-size: 24px;
}
@media(max-width: 768px){
  .header{
    height: auto;
  }
  .list li{
    width: 48%;
    margin: 0 1%;
  }
}
@media(max-width: 767px){
  .list li{
    width: 98%;
  }
}
@media(max-width: 414px){
  .list li{
    font-size: 18px;
  }
}

上一篇
RWD|常見佈局設定+UI設計注意細節
下一篇
RWD|響應式表格與表單設計
系列文
網頁排版個人學習筆記30

尚未有邦友留言

立即登入留言