無需在此對響應(yīng)式網(wǎng)頁設(shè)計(jì)多做介紹，它已經(jīng)無所不在了。但是你可能會(huì)疑惑：為什么在 Sass 樣式指南中會(huì)有關(guān)于響應(yīng)式網(wǎng)頁設(shè)計(jì)的章節(jié)？正因?yàn)橛兄T多降低斷點(diǎn)使用難度的方式，所以我認(rèn)為在這里列出來會(huì)是個(gè)不錯(cuò)的主意。

命名斷點(diǎn)

我認(rèn)為使用媒體查詢而不針對特定設(shè)備是安全可靠的做法。特別要指出的是，不應(yīng)該贊成專門針對 iPad 或黑莓手機(jī)設(shè)計(jì)媒體查詢。媒體查詢應(yīng)該關(guān)注屏幕尺寸，直到當(dāng)前設(shè)計(jì)遇到阻斷而將所有工作過繼給下一個(gè)媒體查詢。

與之相同的觀點(diǎn)是，斷點(diǎn)不應(yīng)該用設(shè)備來命名，而應(yīng)使用更通用的方式。特別是，現(xiàn)在有一些手機(jī)比平板更大，而有一些平板比電腦更大……

// Yep
$breakpoints: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

// Nope
$breakpoints: (
  'tablet': (min-width: 800px),
  'computer': (min-width: 1000px),
  'tv': (min-width: 1200px),
);

就此來說，任何不與特定設(shè)備關(guān)聯(lián)而表達(dá)清晰的命名約定，都會(huì)因其廣泛的通用性獲得認(rèn)可。

$breakpoints: (
  'seed': (min-width: 800px),
  'sprout': (min-width: 1000px),
  'plant': (min-width: 1200px),
);

上面的示例使用了嵌套的 map，但這并不是強(qiáng)制或絕對的，你完全可以使用字符串來代替（比如 '(min-width: 800px)'）。

斷點(diǎn)管理器

一旦用自己鐘意的方式命名完斷點(diǎn)，就需要有一種方式在實(shí)際的媒體查詢中使用它。有太多方法可以做這件事，我自己非常樂意使用 map-get() 函數(shù)讀取斷點(diǎn)地圖的方法。這套系統(tǒng)簡潔而高效。

/// Responsive breakpoint manager
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
@mixin respond-to($breakpoint) {
  $raw-query: map-get($breakpoints, $breakpoint);

  @if $raw-query {
    $query: if(
      type-of($raw-query) == 'string',
      unquote($raw-query),
      inspect($raw-query)
    );

    @media #{$query} {
      @content;
    }
  } @else {
    @error 'No value found for `#{$breakpoint}`. '
         + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

更多有關(guān) Sass 中媒體查詢的信息，請參考 SitePoint 和 CSS-Tricks 中優(yōu)秀的實(shí)踐文章。

媒體查詢用法

就在不久之前，有一個(gè)關(guān)于應(yīng)該在哪里書寫媒體查詢的熱門討論：媒體查詢是應(yīng)該與選擇器寫在一起（Sass 允許這種方式），還是要徹底地分離開？我想說我是媒體查詢緊貼選擇器方式的狂熱捍衛(wèi)者，并且認(rèn)為這會(huì)和組件一樣表現(xiàn)得很棒。

.foo {
  color: red;

  @include respond-to('medium') {
    color: blue;
  }
}

生成結(jié)果：

.foo {
  color: red;
}

@media (min-width: 800px) {
  .foo {
    color: blue;
  }
}

可能你已經(jīng)了解到，這種習(xí)慣會(huì)導(dǎo)致 CSS 輸出文件中出現(xiàn)重復(fù)的媒體查詢語句。不過測試了和下面的話認(rèn)為一旦 Gzip（或者其他相同軟件）完成壓縮就不會(huì)有什么問題：

……我們反復(fù)測試了貼合與分離兩種媒體查詢方式對性能的影響，結(jié)論是即使在最差情況下也沒有明顯差異，而在最好情況下差異更是少之又少。
— Sam Richards 關(guān)于Breakpoint 的看法

如果現(xiàn)在你仍擔(dān)心媒體查詢的副本問題，你可以使用工具來合并它們，比如這個(gè) gem，但是我有必要警告你移動(dòng)相關(guān) CSS 代碼可能會(huì)有副作用。是否了解資源順序是非常重要的。