百分百正確設置CSS斷點的方法 – Free Code Camp

接下來近一分鐘里，我希望你暫且將CSS、web開發、數字化用戶界面拋之腦后。

接著，我想讓你暢想時光回退，回到年少時，回到上學第一天。

那時的你更簡單，只擔心畫沒畫好圖形，有沒有尿褲子。

現在，看看上圖中的點，注意有些點是怎樣聚在一起的，有些點又是怎樣分開的?我想讓你把這些點分為五組，把你認為適合的分在一起。

開始吧，先檢查下有沒有人作弊，檢查完后，你就可以用你那孩子般的手指沿著每組的周圍畫一個圓。

你可能會畫成下面這樣吧？（無論你做什么，只要別告訴你啥也沒做屏幕它就自己滾下去了，我不會相信的！）

確實，本來無論怎么劃分右邊的兩個點都可以。我認為它們劃分在一起也沒錯。有人說沒有錯誤的答案，但我從來沒錯過，所以我也從不認可這個特別陳詞濫調的說法。

在我繼續往下說之前，讓我猜猜你剛才畫的是否像下面這樣呢？

可能也不像，對吧？

但如果你要將你的斷點設置在能匹配流行設備的確切寬度（320px,768px,1024px）的位置，那如上圖這樣劃分是最基本的。

你曾經是否有在不經意間聽過或說過下面這些話？

中間斷點應該是一直到768像素呢，還是包括768像素呢？我明白了，那就是ipad橫屏的大小啊，它就是大（large）嗎？哦，大(large)是768像素及其以上。我知道了，那小(small)就是320像素嗎？那在0到319像素范圍內的又是什么呢？難道是螞蟻斷點？

我本可以不管上面那個問題繼續告訴你正確的做法，但我發現上述方法（"愚蠢的分組"）卻非常廣泛，對此我感到十分好奇。

為什么會這樣呢？

我認為這個問題的答案，就像很多的問題一樣，歸結為術語不一致。畢竟，如果你都不了解 關塔那摩灣 那些事的話，你可能還認為那里的水刑聽起來超級棒。（哦， 我希望 這是我的玩笑話）

因為我認為我們在討論和實現斷點時將"邊界"和"范圍"這兩個術語搞混淆了。

如果你在Sass中設置斷點，你會有一個叫 $large 的變量嗎？也就是768像素。

你是把范圍的下邊界當作是大（large）呢，還是上邊界當作是大（large）呢？如果是下邊界，那么你一定不需要再有 $small 變量了，它應該就是0了，是吧？

而如果這是上邊界那么你又如何定義一個 $large-and-up 斷點呢？那就必須是 min-width 為 $medium 的媒體查詢,沒錯吧？

當你說大(large)的時候你是指一個邊界，那么我們就陷入困惑了，因為媒體查詢總是一個范圍。

這種情況很混亂，弄清楚它實在很浪費時間。所以我給出三條建議：

1. 正確設置斷點

1. 合理命名范圍

1. 聲明

Tip #1: 正確設置斷點

那什么斷點才是正確的呢？

還記得剛才讓你在上學第一天畫的那些圓圈吧。我現在只是為你把它變成了矩形。

如果你打算給監控巨型顯示器的人顯示跟其他顯示器不一樣的東西，那么將600像素, 900像素, 1200像素 和 1800像素設置為斷點就是正確的。另提醒喲，如果你要在網上購買一個巨型顯示器（giant monitor），一定要確保它確實是臺計算機。

其實剛讓你回到年少時玩的那些點實際上代表14種最常見的屏幕尺寸：

所以我們現在可以制作如下一張漂亮的小圖片方便讓商人，設計師，開發人員，測試人員之間進行暢通無阻的交流啦。

我突然有點后悔選擇了橘色和綠色搭配，但我不會重新再做這些圖片的。

Tip #2: 合理命名范圍

當然，只要你喜歡，你可以命名斷點為 熊爸爸和熊寶寶 。但如果我正要坐下和設計人員討論網站在不同設備上應該如何顯示的時候，我希望這個命名能讓大家很快明白，盡快結束討論。如果為了方便命名為某個大小的平板電腦，那我就完蛋了。真見鬼，你甚至命名為"iPad平板電腦（iPad portrait）"都比那名字好。

"但是外觀在時刻變化！"你也許會反駁說，"手機越變越大，平板越變越小"。

但你網站的CSS能用三年（除非它是Gmail）。三年iPad已經換了兩代，CSS都還能用。大家肯定都知道，蘋果已不再制造新產品，只是在已有的東西（按鈕、孔啊等等）上刪減而已。

所以親們啊，1024 x 768的分辨率會保留的。別用沙子埋了腦子（有趣的事實：鴕鳥沒在城市生活是因為沒沙子來躲避捕食者）。

結論：溝通很重要，命名時要合理，使用有用的詞匯。

Tip #3: 聲明

我知道，我知道，又在重復 “聲明”這個詞了。我換種方式說明：你的css應該定義它想要發生的事情，而不是它應該怎樣發生。因為怎樣發生應該隱藏于某種混合（mixin）里。

早前，圍繞斷點的討論有部分略顯混亂，把適用于范圍的命名亂用于定義一個范圍邊界的變量。如果 large 是一個范圍那么簡單地使用 $large: 600px 是沒有意義的。就像是說 var coordinates = 4; 。

所以我們可以在一個混合（mixin）里隱藏這些細節的實現而不是直接在代碼里暴露它們，或者我們可以想個更好的方法完全不使用變量。

首先我給出下面片段做為一個簡單的例子。但我真的認為它涵蓋了所有的基礎。看個實際應用， 查看在codeopen上的pen .我使用Sass是因為我不能想象沒有它怎么建設網站，這樣的邏輯同樣適用于CSS或Less。

`@mixin for-phone-only { @media (max-width: 599px) { @content; } } @mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } @mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } @mixin for-desktop-up { @media (min-width: 1200px) { @content; } } @mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } }

// usage .my-box { padding: 10px; @include for-desktop-up { padding: 20px; } } `

我可能有點偏見，但這些CSS的聲明真的超級棒。

請注意，我強迫開發人員要指定 -up 或者 -only 做為后綴。

歧義滋生混亂

上述代碼一個明顯的詬病可能是沒有處理自定義媒體查詢。各位，這是好消息啊。如果你想定義一個自定義媒體查詢，就寫一個自定義媒體查詢（在實踐中，如果我需要實現比上面更復雜的效果，那為了減少損失我會義無反顧地選擇使用 Susy 工具包）

另一個詬病可能是我上面用了8個混合（mixin）。當然使用單個混合(mixin)會更符合正常習慣，然后只需傳遞所需的大小，像這樣： ` @mixin for-size($size) { @if $size == phone-only { @media (max-width: 599px) { @content; } } @else if $size == tablet-portrait-up { @media (min-width: 600px) { @content; } } @else if $size == tablet-landscape-up { @media (min-width: 900px) { @content; } } @else if $size == desktop-up {

@media (min-width: 1200px) { @content; } 
 } @else if $size == big-desktop-up { 
 @media (min-width: 1800px) { @content; } 
 }

} // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } } ` 當然，這能行得通。但如果你傳入不受支持的命名在編譯時并不會報錯。而且僅僅為了傳遞一個Sass變量到混合（mixin）開關中,卻會暴露8個變量。

更不用說 @include for-desktop-up {...} 語法比 @include for-size(desktop-up) {...} 漂亮多了。

兩段代碼片段的詬病可能是我輸出了兩次900px，還有899px。當然也許我應該只使用變量然后在需要的時候讓變量減1。

但如果你想那樣做，簡直令人發狂。但我不這么做，有兩個原因：

1. 這些不會經常改變，這些數字也不是在代碼庫任何其他地方都會使用。實際上它們不是變量也不會造成問題——除非你想在你的頁面中將你的Sass斷點暴露給一個腳本，而該腳本注入了帶有這些變量的JS對象。

2. The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils: 用Sass把數字轉為字符串的語法很令人討厭。如果你認為重復一個數字兩次是最差的選擇，那你會為此付出這些代價。 ` @mixin for-size($range) { $phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @if $range == phone-only { @media (max-width: #{$phone-upper-boundary - 1}) { @content; } } @else if $range == tablet-portrait-up { @media (min-width: $phone-upper-boundary) { @content; } } @else if $range == tablet-landscape-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == desktop-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == big-desktop-up { @media (min-width: $desktop-upper-boundary) { @content; } } }

// usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } } `

理解起來會更容易了呢，還是更難呢？

哦，在前面幾個段落我言辭有些激昂...因為我為有些傻瓜感到可憐，因為他們做些讓人費解的事，比如將斷點存儲在一個Sass列表里然后循環輸出媒體查詢，或做些荒謬的事讓接手的開發人員難以理解和維護。

越復雜越容易出現bug

最后，你也許會想“我難道不應該將斷點設在內容而不是設備的基礎上嗎？”我很驚訝你能想到這點，答案是肯定的...但前提是對一個布局單一的網站而言。如果你想要多種布局，你就要為每種布局設置一個斷點。哦，還有除非你的網站設計不經常變化，或者你很樂意在網站設計更新時也更新斷點，因為你想讓它們設置在內容的基礎上嘛，對吧?

對于復雜的網站，建議網站少設置一些斷點，你才會更輕松。

好了，我已經說完了！但這篇文章沒有我想要的那么令人毛骨悚然，讓我看看能想到什么借口，包括一些。。。。

哦，我知道了！

###斷點開發獎勵提示

是的，即使是 flickr 都設置了768到1400的斷點。

1. 如果你需要體驗比你現在坐著的這臺顯示器更大的屏幕尺寸的CSS斷點,可以在Chrome 開發工具里使用"responsive"模式，鍵入你喜歡的任何尺寸。

2. 藍色欄顯示媒體查詢"max-width"，橘色欄顯示媒體查詢"min-width"，綠色欄顯示媒體查詢的MIN和MAX

3. 點擊媒體查詢把屏幕設置到該尺寸，如果你多次點擊綠色的媒體查詢，它會在最大和最小間切換顯示。

4. 在媒體查詢欄右鍵單擊某一個媒體查詢可以看到該媒體查詢在CSS規則中的定義。

 

來自：http://www.zcfy.cc/article/the-100-correct-way-to-do-css-breakpoints-free-code-camp-2083.html