命名斷點(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á)清晰的命名約定，都會因其廣泛的通用性獲得認(rèn)可。

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

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

擴(kuò)展閱讀

• Naming Media Queries