無需在此對響應(yīng)式網(wǎng)頁設(shè)計多做介紹,它已經(jīng)無所不在了。但是你可能會疑惑:為什么在 Sass 樣式指南中會有關(guān)于響應(yīng)式網(wǎng)頁設(shè)計的章節(jié)?正因為有諸多降低斷點使用難度的方式,所以我認(rèn)為在這里列出來會是個不錯的主意。
我認(rèn)為使用媒體查詢而不針對特定設(shè)備是安全可靠的做法。特別要指出的是,不應(yīng)該贊成專門針對 iPad 或黑莓手機(jī)設(shè)計媒體查詢。媒體查詢應(yīng)該關(guān)注屏幕尺寸,直到當(dāng)前設(shè)計遇到阻斷而將所有工作過繼給下一個媒體查詢。
與之相同的觀點是,斷點不應(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á)清晰的命名約定,都會因其廣泛的通用性獲得認(rèn)可。
$breakpoints: (
'seed': (min-width: 800px),
'sprout': (min-width: 1000px),
'plant': (min-width: 1200px),
);
上面的示例使用了嵌套的 map,但這并不是強(qiáng)制或絕對的,你完全可以使用字符串來代替(比如 '(min-width: 800px)'
)。
一旦用自己鐘意的方式命名完斷點,就需要有一種方式在實際的媒體查詢中使用它。有太多方法可以做這件事,我自己非常樂意使用 map-get()
函數(shù)讀取斷點地圖的方法。這套系統(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)秀的實踐文章。
就在不久之前,有一個關(guān)于應(yīng)該在哪里書寫媒體查詢的熱門討論:媒體查詢是應(yīng)該與選擇器寫在一起(Sass 允許這種方式),還是要徹底地分離開?我想說我是媒體查詢緊貼選擇器方式的狂熱捍衛(wèi)者,并且認(rèn)為這會和組件一樣表現(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í)慣會導(dǎo)致 CSS 輸出文件中出現(xiàn)重復(fù)的媒體查詢語句。不過測試了和下面的話認(rèn)為一旦 Gzip(或者其他相同軟件)完成壓縮就不會有什么問題:
……我們反復(fù)測試了貼合與分離兩種媒體查詢方式對性能的影響,結(jié)論是即使在最差情況下也沒有明顯差異,而在最好情況下差異更是少之又少。
— Sam Richards 關(guān)于Breakpoint 的看法
如果現(xiàn)在你仍擔(dān)心媒體查詢的副本問題,你可以使用工具來合并它們,比如這個 gem,但是我有必要警告你移動相關(guān) CSS 代碼可能會有副作用。 是否了解資源順序是非常重要的。