[译] 响应式设计的基本原则

• 原文地址：Responsive design ground rules
• 原文做者：Polypane
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Pingren
• 校对者：Moonliujk，Chorer

响应式设计的基本原则

建立响应式设计使人胆战心惊：它由许多移动的部分构成，并且常常不像你指望中同样排列；你在设计的时候还要惦记着全部不一样的视口（viewports）。经过遵照这些基本原则，你能够建立出更加健壮和可预测的响应式设计。

原则 #1：保持简单的视口

当初刚实施视口元标记（viewport meta tag）的标准时，基本常识是你必须添加各类值，从而阻止用户缩放，以及设置最大和最小的屏幕尺寸。结果代表，这实际上是对用户不友好的作法。

事实上你只须要作两件事：把宽度设置为展现你的网站的设备宽度，以及保证初始缩放为 1。这么作表明了你 CSS 中的 1 像素等于 1 设备独立像素，像这样：

<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码

原则 #2：移动优先

你在一台大笔记本电脑或桌面显示器上开发网站，而且，一般状况下你的客户更在乎网站的桌面设计。所以，你可能天然以为就先从桌面设计开始开发。可是，优先开发移动端其实更简单，并且会让你的代码更少。

若是你先开发移动端，你将在开发中逐渐增长 CSS 的复杂度。你的手机视图一般简单许多，须要更少的 CSS。手机视图一般永远只有一列，缺乏许多额外的装饰和效果。毕竟在更大的屏幕才有空间展现它们。若你的开发“移动优先”，随着你为愈来愈大的媒体查询增长样式，你在补充设计。

若是你先开发桌面端，你已经有了全部的样式，仅仅为了撤销你高级的桌面样式，你就须要写更多的 CSS。你写了更多的 CSS，若是其中有一处不当心没写好，就会出现诸如布局水平溢出或是文本大小不合适的问题。

经过移动优先，你将避免大量非必需的 CSS，使你的 CSS 更轻，网站更快。

原则 #3：根据内容设计

你能够选择使用 320 px，375 px，768 px 以及 1024 px 这样的值做为你的断点（breakpoint）。它们对应了真实设备的宽度。这就是基于特定设备的设计。可是当新的设备变得更流行 (#375IsTheNew320)，在那些新设备上，你的设计看上去可能就不是很好了。

Stephen Hay，响应式设计工做流 的做者，建议你从小屏幕开始，接着“增长屏幕宽度直到丑出天际，是时候加入断点了！”

专一于内容，让你不得不把网站当成天然流动的布局。你没法只为完美像素的宽度设计，由于这些宽度不存在。

经验：当你想要行宽在 70 个字符左右时，那差很少等于（取决于字体！）36 到 40em。

原则 #4：在媒体查询中使用 em

既然特定的设备宽度再也不重要，你也应该把像素单位的宽度断点改为 em 单位的宽度。你的媒体查询基于内容。这样一来，即便用户把浏览器的基础字体调大/调小或缩放浏览器，你的网站依然看上去很棒。

如此调整你设计的其他部分，让你的网站更加健壮。

原则 #5：最小或最大宽度，只选一个

响应式设计实现了一个十分复杂的系统。当你的媒体查询使用最小宽度和最大宽度，或是混合使用它们时，复杂度便极度增长，理解这个系统也更难了。

若是全部的媒体查询“向上”或“向下”工做，而某个尺寸下你的网站看上去和预期不一样时，你总能知道该看看哪儿的代码。在新的媒体查询中写 CSS 永远不会影响你以前已经写好的屏幕尺寸。你只须要找出从哪一个媒体查询之下（或上）去更新 CSS 就好。

原则 #6：避免固定的尺寸

将元素设置成固定的尺寸也许很吸引你。毕竟，你最喜欢的设计交接工具可能让你轻松地拷贝它们。若是你不当心，固定宽度（或边距）很容易破坏你的布局。

尝试把元素的尺寸设置成与它们的环境相关。使用百分比或者视口单位。避免设置 width 和 height，尝试设置相应的 min- 和 max-。若是你发现 width 对布局形成了破坏，一个 max-width:100% 能够创造奇迹。

原则 #7：使用现代布局技术

基于上条原则，例如弹性盒子（Flexbox）和网格（Grid）的现代布局方法，天生就很灵活，还能根据它们的环境改变大小。若是你使用这些布局方法，你只须要更少的媒体查询就能实现相同的设计。更少的媒体查询意味着更少的事情须要你推理，而你的代码也变得更简单。

Every-layout.dev 上你能够（从新）学习如何使用弹性盒子和网格布局构建经常使用布局。它列出了一些经常使用的布局，而且解释了如何使用现代技术构建它们。

原则 #8：为字体渲染的不一样预留空间

在一个不合适的换行处建立一个断点很吸引你。为了让“像素完美”。固然，咱们知道 web 历来没有过所谓的“像素完美”。

若是你的断点距离可读的换行太近，它可能在你的浏览器可用。在不一样浏览器和不一样操做系统下有着不一样的渲染方式。这意味着一行字可能会宽或窄几个像素，从而破坏你的设计。

尝试对你的媒体查询宽松一点，用一些像素为可能的错误预留一点空间，防止你的设计发生巨大的变化。

原则 #9：在浏览器内决定

为了遵照这些规则，在设计工具里建立全部断点是不明智的。另外一方面，在浏览器内设计整个网站也很难。那么折中办法是什么？

你可在设计工具里建立设计，以及一些粗略的响应式版本。可是，在你在浏览器内工做时才能够决定转换到另外一个设计。Sketch 画板的宽度多是 750 px，但若是你在浏览器内发现布局已经在 44 em（至关于 704 像素）工做得很好，那么就在 CSS 中使用 44 em。

原则 #10：尝试 Polypane

经过 Polypane，以移动优先，内容优先的方式建立网站和 App 变得十分天然。从一个小面板开始设计你最小的屏幕。接着，添加一个新的面板，将它变宽直到它如同 Stephen 所说的 “丑出天际”。而后检查面板的宽度，并用那个 em 值做为你的新断点。设置样式而后不断地重复直到完成。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。