1. 内容决定转效点(Let content determine breakpoints)
从最小屏幕开始,逐渐扩大窗口,当效果丑陋不堪(like shit)时,此处就是breakpoint。
2. 把布局看作为增强行为(Treat layout as an enhancement)
作为移动优先的响应式设计策略的一部分,以移动优先的方式书写样式是非常重要的。样式代码更少、更简洁、更易维护。
代码语言:javascript复制/* Desktop-first styles: Avoid */
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}
代码语言:javascript复制/* Mobile-first styles FTW */
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}
3. 使用主、次转效点(Use major and minor breakpoints)
- 主转效点:效果显著变化,如一列变两列、三列。
- 次转效点:某些特定元素的调整,或称为tweakpoint
使用Sass管理转效点
代码语言:javascript复制$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