媒體查詢(xún)用法

就在不久之前，有一個(gè)關(guān)于應(yīng)該在哪里書(shū)寫(xiě)媒體查詢(xún)的熱門(mén)討論：媒體查詢(xún)是應(yīng)該與選擇器寫(xiě)在一起（Sass 允許這種方式），還是要徹底地分離開(kāi)？我想說(shuō)我是媒體查詢(xún)緊貼選擇器方式的狂熱捍衛(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ù)的媒體查詢(xún)語(yǔ)句。不過(guò)測(cè)試了和下面的話(huà)認(rèn)為一旦 Gzip（或者其他相同軟件）完成壓縮就不會(huì)有什么問(wèn)題：

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

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

擴(kuò)展閱讀

• Sass and Media Queries
• Inline or Combined Media queries? Fight!
• Sass::MediaQueryCombiner

如果你喜歡 Sass Guidelines，請(qǐng)支持它

?支持 Sass Guidelines