Responsive Web Design-手機優先和高解析瀏覽器重點提示 Mobile First&Desktop First Tips

【一些手機先訣Responsive Web Design提示】

由手機往桌面版寫的設計 手機>平板>高螢幕解析度

• 不設寬度
• 用%表示比例
• css裡響應式語法  @media(min-width)
• 超過960px @media(min-width:960px){ .wrap{ max-width:960px} }                                       超過960px寬度最寬為960px
• 超過一定寬度變二欄式 (ex:768px 平板寬度)                                                                                @media(min-width:768px) { . news li {width : 48% ;}
• 超過960px寬度變三欄式                                                                                                                  @media(min-width:960px) { . news li {width : 33.3333% ;}

【手機/平板解析度】

統計上手機最常使用的是360 x 640、平板則是786 x 1024、電腦是1366 x 768

根據bootstrap中的響應點來設置320/480/768/1024

iPad - 768px

iPad以下 - 767px

iPhone 6 Plus  -  414px 

iPhone 6 - 375px  

iPhone 5、SE - 320px

GOOGLE有Responsive Web Design的中文說明，有興趣可以去研究看看

https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=zh-tw

【高解析瀏覽器優先 Desktop  First】

如果寬度底色沒有要佔滿權版面，寬度設定
.wrap {max-width:xxx px;}最大xxx px意思，
不然在做手機平板響應式會失敗，無法切換雙欄/單欄.