七个高度有效的媒体查询技巧

本文由大漠根据Brad Frost的《7 Habits of Highly Effective Media Queries》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries，以及作者相关信息
——作者：Brad Frost
——译者：大漠

我们都知道，Media Queries是实现响应式设计的秘密武器。在这篇文章中，将向大家介绍制定高质量的Media Queries需要注意的一些事项。

让内容确定断点

很多时候，在响应式设计中，你经常看到的断点值是：320px、480px、768px和1024px等。
不要使用流行的设备尺寸（320px是iPhone设备的竖屏尺寸，480是iPhone设备横向屏幕尺寸，768px是iPad竖向屏幕尺寸，等等）来确定断点。该设备的屏幕（Device Landscape）是不断在变化的，所以使用流行设备的尺寸作为断点，他的实际价值存在的意义可能没有什么，甚至一年的时间都坚持不到。Web本质是流动的，因此我们的工作是在任何屏幕上创建外观、功能等，而不是简简单单的几个断点。
我创建ish的原因就是鼓励设计师考虑整个分辨率，而不只是今天流行的几个设备尺寸。请尝试使用“Disco Mode”给你的设计做一个压力测试。
所以你应该在哪里插入断点，应该遵循Stephen Hay的建议：

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!-Stephe Hay.
它是这么简单。

扩展阅读

• Determining Breakpoints in Responsive Design
• Fanfare for the common breakpoint
• There Is No Breakpoint
• Choosing device sizes to support for your responsive designs
• The In-Between

对布局作为一种增加

The absence of support for media queries is in fact the first media query. -Bryan Rieger

作为一个移动先行响应式设计策略，重要的是我们要有一个移动先行的风格方式。
因此这个东西很有意思：

/* 桌面第一风格:避免 */
.column{
  float:left;
  width:50%;
}
@mediaall and (max-width:50em){
  .column{
    float:none;
    width:auto;
  }
}

当我们想只介绍布局的具体规则时，我们需要他们：

/* 先动先行的风格： FTW */
@mediaall and (min-width:50em){
  .column{
    float:left;
    width:50%;
  }
}

移动先行将导致的结果是更简单，更易于维护你的代码。这种方法还提供了对老的并不支持媒体查询的移动端浏览器的更友好支持。

扩展阅读

• Creating a Mobile-First Responsive Web Design
• Essential considerations for crafting quality media queries

使用主要断点和次要断点

重要的是要理解，并不是每个设计都需要巧妙的融入小的、中等的、大的断点。当然，有时一个网站的设计，发有一些戏剧性的事情发生，比如说当一列成两在变成三列。这个时候，关键点就是把握住他们在主要的断点时，才会有这戏剧性的一幕发生。

我使用Sass来控制我的断点，所以根据不同的设计，我主要断点变量看起来像这样：

$bp-small : 24em;
$bp-med : 46.8em;
$bp-large : 50em;
$bp-xl : 73em;

如果您从未接触过Sass的任何知识，个人建议您先抽空了解一些Sass方面的知识，如果你感兴趣，可以点击这里查阅——大漠

但在一些设计中，有一些特殊元素之间的值需要调整。这样一来就可以为这些特定的元素添加一个小断点（如Jeremy Keith所说的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;`

这种方法是否也适合你呢？
至于如何看待主要断点和次要断点，主要取决于你，但重要的是要利用这两类断点。

扩展阅读

• Tweakpoints
• Pragmatic Responsive Design

使用相对单位

我常喜欢背靠着椅子使用我的电脑，所以我经常使用cmd +来放大网站文本。当我们使用断点使用的是像素时，页面放到出现水平滚动条，并没有正常的工作。

/* Avoid pixel-based media queries */
@mediaall and (min-width:800px){
  ...
}

不应该使用像素，我们应该为我们的媒体查询使用相对单位。

/*useemsformedia queries*/
@mediaalland(min-width:50em) {
  ...
}

首先在样式中，我们都放弃了对像素(px)的使用，在使用em、rem和百分比(%)，那么我们为什么不能将这些相对单位运用到媒体查询中呢？其次，在媒体查询中使用相对单位允许浏览来调整设计基于用户缩放的级别，让用户有一个更愉快、更容易阅读的用户体验。

看，就像老人家的视力！