7、响应式网页设计：移动优先还是桌面优先？

响应式网页设计：移动优先还是桌面优先？

在网页设计中，我们常常面临一个重要的抉择：是采用移动优先（Mobile-first）还是桌面优先（Desktop-first）的设计方法。这两种方法各有优劣，适用于不同的场景。

设计布局与内容层次

当我们明确了内容层次后，就可以开始构思不同的布局来呈现这种层次。例如，为了让用户提供电子邮件地址，我们会创建一个包含标题、段落、电子邮件输入框和按钮的表单。这个表单可以放置在页眉下方的左上角，宽度为三到四列。不过，四列可能太宽了，我们可以先进行线框设计，看看实际效果以及可能存在的可用性、可访问性和可读性问题或优势。

对于特色文章，我们将使用剩余的列。如果电子邮件表单是三列宽，我们将使用剩余的九列；如果是四列宽，则使用剩余的八列。特色文章包含更多内容，如标题、作者、日期、类别、摘要、缩略图和完整文章的链接。

使用设计/线框应用程序中的宽画布，我们可以尝试不同的方法，最终得到一个合理的布局，该布局能够准确呈现业务或利益相关者要求的内容层次。而使用移动优先方法在小画布上创建这样的布局几乎是不可能的，因为小屏幕的空间非常有限。而且，当内容增加时，每次考虑特定的断点时都需要重新进行探索。实际上，我们此时不应过多考虑断点，因为内容而非特定的设备宽度决定了何时需要添加新的断点。一旦确定了反映内容层次的布局，即使内容在小屏幕上重新排列，层次结构也能保持完整。

为何采用移动优先实现

在实现阶段，也就是根据线框或设计稿创建 HTML 原型并使用 CSS 和必要的 JavaScript 时，采用移动优先有诸多原因。如今移动设备的使用量呈爆炸式增长，移动优先迫使我们专注于核心内容，并且能够扩展我们的设计能力