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检测屏幕是处在横向还是竖向模式。