[學習筆記] RWD網頁設計04 — 斷點規劃 - Shino Liu

舉例來說: @ media(min-width: 768px) ，意思是當解析度超過768px 時，其CSS 設定會被開啟。

而當我們寫到桌機版時，現在電腦的螢幕解析度越做越大，此時我們可以設定一個 ... HomeNotificationsListsStoriesWrite[學習筆記]RWD網頁設計04—斷點規劃好希望網頁在每個螢幕解析度下都好看喔…?到底要下幾個斷點才好呢?CSS3mediaqueries什麼是斷點(Breakpoint)?簡單來說就是為了這個版型，我們設計了幾個mediaquery，兼容哪幾個螢幕解析度。

通常只會針對常見和熱門的螢幕解析度去做斷點設計，像是ipad、iphone或是市面上常見的手機螢幕解析度來做優化。

如何替客戶設計響應式斷點?遵循80/20法則如果客戶有舊網站時，可以先透過客戶的GA分析觀察數據，了解客戶網站的族群的熱門裝置，去做斷點設計，但如果沒有可參考的舊網站，則先以目前最熱門的解析度去設計就好，這樣其實可以滿足80%以上大部分的用戶了。

Mobilefirst?Desktopfirst?以往傳統在設計網頁時，通常會以desktop桌機優先，但現代手機普遍被使用，才會有響應式的設計出現，因此當我們從手機版開始設計版型，也就是Mobliefirst，則會搭配min-width來做斷點的設計。

舉例來說:@media(min-width:768px)，意思是當解析度超過768px時，其CSS設定會被開啟。

而當我們寫到桌機版時，現在電腦的螢幕解析度越做越大，此時我們可以設定一個max-width去固定最外層容器的寬度，並且搭配margin:0auto;水平置中，網頁內容則不會滿版顯示，使用者閱讀起來也會比較舒適。

在螢幕解析度寬度超過960px時，透過max-width固定最外層容器寬度—Note:目前瀏覽器、螢幕解析度等的市占率高低，都可以透過statcounter這個網站去做查詢唷！—補充:熱門的螢幕解析度768px:iPad直式767px:iPad直式以下(皆可視為手機)414px:iPhone6/7/8plus(視專案族群)375px:iPhone6/7/8/X(視專案族群)320px:iPhone5、SE如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)MorefromShinoLiuFollow需漏の前端自學之旅Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstartedShinoLiu12Followers需漏の前端自學之旅FollowRelatedCSS:whatisthedifferencebetweenrem,em,px,&vw/vhunitsHowtousetheaccessibilitytreefora11ytestingHTMLBASICSHeadings,Lines,CommentsWeek1:3Weeksin1:TheBasicsofHTML&CSSCompletedHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable