进步博客

创建高效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