创建高效media queries的七个好习惯

1. 内容决定转效点（Let content determine breakpoints）

从最小屏幕开始，逐渐扩大窗口，当效果丑陋不堪（like shit）时，此处就是breakpoint。

2. 把布局看作为增强行为（Treat layout as an enhancement）

作为移动优先的响应式设计策略的一部分，以移动优先的方式书写样式是非常重要的。样式代码更少、更简洁、更易维护。

/* Desktop-first styles: Avoid */
.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

/* Mobile-first styles FTW */
@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

3. 使用主、次转效点（Use major and minor breakpoints）

• 主转效点：效果显著变化，如一列变两列、三列。
• 次转效点：某些特定元素的调整，或称为tweakpoint

使用Sass管理转效点

$bp-small : 24em;
$bp-small-2 : 29.75em;
$bp-small-3 : 39.8em;
$bp-med : 46.8em;
$bp-med-2 : 48em;
$bp-large : 50em;
$bp-large-2 : 54.5em;
$bp-xl : 60em;
$bp-xl-2 : 67em;

4. 使用相对单位（Use relative units）

media queries中使用相对单位，浏览器可以根据用户的缩放等级调整设计效果，避免出现横向滚动条，提供一个更加舒适和易于阅读的体验。

5. 超越宽度（Go beyond width）

检测viewport width不是media queries的全部，可检测的媒体特性非常多，包括color, color index, aspect ratio, device aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, scan, pixel-density等。

• 使用pixel-density可以为视网膜屏或其他高分辨率屏幕有条件的提供大背景图片或icon sprites。
• 使用height检测可用的屏幕高度，并相应的调整样式。
• 使用orientation检测屏幕是处在横向还是竖向模式。

6. 条件装载（Use media queries for conditional loading）

7. 过犹不及（Don’t Go Overboard）

参考文献：

7 Habits of Highly Effective Media Queries