在现代网页设计中，响应式的网页设计已经成为了主流的设计设计方案。在响应式的设计方案中，使用的最多的技术当属CSS媒体查询技术（media queries）。媒体查询的语法并不是十分的难懂，但是为什么要使用媒体查询这个问题有时候会一直困扰我们。
这篇文章将介绍一些移动优先（Mobile-First）的响应式设计方案，通过这些例子我们可以了解为什么我们需要使用媒体查询。同时也指出了应该如何使用媒体查询来编写移动优先的响应式布局。下面先来看看什么是“移动优先”。
移动优先
Luke Wroblewski在他的书中提出了许多关于移动优先的方法。他在书中描述了移动优先策略的设计优点，以及如何在移动设备中让用户体验提升的方法。他所描述的就是移动优先的设计方案。
移动优先是指我们的设计应该从小屏幕设备开始，如手机屏幕等。然后再逐渐的增大屏幕的尺寸，为各种不同尺寸的屏幕设置不同的样式。
下面我们就来看看如何使用媒体查询来设计一个移动优先的页面。
编写移动优先的媒体查询代码
下面我们要用两个例子来介绍这种技术。先来看第一个例子：
.sidebar {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
@media (max-width: 40em) {
.sidebar, .content {
float: none;
width: auto;
}
}
你可以查看这个demo，缩放你的浏览器查看响应式效果。
在这个例子中，两个元素都被设置有左浮动，所有它们会水平并排排列。它们的宽度被设置为百分比宽度。接着使用媒体查询设置在40em breakpoint的时候，取消这两个元素的浮动，并通过设置width:auto，使它们的宽度都为全屏宽度。
使用这个方法有以下几个问题：
- 这个方法会通过媒体查询来“重置”我们的样式。这不是一个高效的方法。
- 原来的元素的浮动的，它们不再文档流中。使用媒体查询只是使元素回到稳定流的正常位置上。
- 这种设计有违移动优先的设计哲学。它先考虑的是大屏幕设备，再向小屏幕设备扩展。
max-width的用法通常是从大屏幕开始实现样式，然后在使用max-width媒体查询逐渐向小屏幕实现各种样式。虽然这并不是绝对的，但大多数情况下是这样做的。下面来看看第二个例子：
@media (min-width: 40em) {
.sidebar {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
}
你可以在这里查看这个demo。下面来看看这种写法的优点：
- 上面代码的做法不是取消元素的浮动，而是在需要的时候将元素浮动起来。这会减少很多不必要的CSS代码。
- 默认情况下，在小屏幕的浏览器中已经为我们提供了必要的布局方式。例如，块级元素默认被设置为
width:auto。所以我们不必要再去设置它们。 - 这个设计方法符合移动优先的设计哲学。
文档顺序：一个更复杂的例子
上面的两个例子都是非常简单的，下面让我们来看看一个稍微复杂一点的例子。先来了解一下DOM元素的渲染顺序。
DOM元素的渲染顺序是指如何呈现文档的DOM元素的顺序。DOM元素是由上往下渲染的。在flexbox出现之前，我们没有办法使用纯CSS的方法来改变渲染的顺序。
你可以在这里查看这个demo。
在响应式设计中，文档顺序是非常重要的概念。在上面的例子中，当屏幕的视口小于40em的时候，第一个元素被放置到屏幕的最上方。这正是我们所需要的，在小屏幕上，由于空间的限制，我们希望元素都和屏幕等宽，各自占据一行。
使用Sass来管理媒体查询
我们可以通过Sass来管理我们的媒体查询代码。
@mixin mquery($size) {
if $size == small {
@media (min-width: 30em) {
@content;
}
}
else if $size == medium {
@media (min-width: 40em) {
@content;
}
}
}
然后可以像下面这样使用它。
.sidebar, .content {
@include mquery(medium) {
float: left;
}
}
小结
这篇文章介绍了一些关于移动优先的媒体查询技术。希望这些资料对你在移动优先设计方面有所帮助。
