响应式设计 | 进步博客

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

处理响应式布局中背景图片的简单方法是等比例缩放背景图片。我们知道宽度设为百分比的 <img> 元素，其高度会随着宽度的变化自动调整，且其宽高比不变。如果想在背景图片中实现同样的效果，我们必须先解决如何保持HTML元素的宽高比。

固定宽高比

我们将用到一个保持元素宽高比的技巧：为元素添加垂直方向的padding值，padding值使用百分比。这是因为垂直方向的padding取值使用百分比时，其值是相对于包含块的宽度而定的[参考Box model]。这个技巧最早在Creating Intrinsic Ratios for Video一文中用来创建固有比率的视频，查看demo。

假设我们有一张800*450px的图片，我们需要创建一个元素在其宽度变化时，它的宽高比仍保持16:9。代码如下：

<div class="column">
  <div class="figure"></div>
</div>

.column{
  max-width: 800px;
}
.figure{
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}

自己动手试试吧

添加背景图片

上面我们实现了元素缩放并保持宽高比。但是此时如果我们添加了背景图片，它并不能跟随元素一起自动缩放。还需要添加background-size:cover。使用这个属性让背景铺满元素的缺点是IE8及以下浏览器不支持，为了使IE下的效果可以接受，可以使用background-position将背景图片居中显式。我们必须要保证图片的宽度至少要与元素的max-width一样大。这样的话元素的宽度永远不会比图片大，如果元素小于图片时，图片将被裁剪。

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}

figure.fixedratio {
  padding-top: 56.25%;  /* 450px/800px = 0.5625 */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

再动手试试吧

流动宽高比

我们可以更深入一步。假设我们有一张在桌面浏览器下显式很好的宽屏图片，在移动设备上我们不想使用相同的宽高比，要不然图片会很小。又或者是我们不想使用相同的高度，因为图片可能会过高。

这个效果可以通过较少padding的百分比值和为元素设置一个高度来实现。假设我们的大图是800*200px，我们打算在元素的宽度减少到300px的时候，背景图片的高度为150px。现在我们计算下height和padding-top属性值。

上图显式了两个尺寸的关系。坡度线(slop)对应于padding-top属性，开始高度(start height)对应于height属性，它表示元素在宽度为零时的高度。调整样式如下：

div.column {
  /* The background image must be 800px wide */
  max-width: 800px;
}
figure.fluidratio {
  padding-top: 10%;  /* slope */
  height: 120px;  /* start height */
  background-image: url(http://domain.com/img/sample.jpg);
  background-size: cover;
  background-position: center;  /* Internet Explorer 7/8 */
}

动手试试吧

进步博客

标签归档：响应式设计

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