响应式设计基本规则

创建响应式设计可能令人生畏。有许多活动部件，事物可能会以你没想到的方式布局，并且在布局设计时要记住所有不同视区可能会令人生畏。有了这些基本规则，您的响应式设计将更加强大和可预测。

规则＃1：保持视区简单

返回首次引入视区元标记(meta tag)时，常见的知识是您必须添加各种值以防止用户调整大小并具有最小和最大屏幕大小。事实证明，这样做实际上对您的用户充满敌意。

您真的只需要两件事：将宽度设置为您的网站所显示的设备的宽度，并确保初始比例为1，这意味着CSS中的1个像素等于一个与设备无关的像素，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1">

规则＃2：移动优先

您在大型笔记本电脑或台式机屏幕上开发网站，通常您的客户最感兴趣的是网站的桌面设计，因此从桌面网站的设计开始然后逐渐减少可能会很自然。但首先启动移动设备实际上更容易，并且会导致更少的代码。

如果您首先构建移动设备，那么您将在复杂性中构建CSS。我的意思是你的移动视图通常更简单，因此需要更少的CSS。它们几乎总是只有一列，缺少许多额外的功能，你可以在更大的屏幕上留出空间。如果您构建移动优先，这意味着，当您为越来越大的媒体查询添加样式时，您将添加到设计中。

如果您是以桌面优先，那么您已经拥有了所有这些样式，然后您需要编写更多CSS以撤消更高级的桌面样式。因此，您正在编写更多CSS，如果您没有小心地撤消所有CSS，那么您最终会遇到水平溢出或文本不合适等问题。

首先使用移动设备，您可以节省大量无需编写的CSS，从而使其更小，更快的访问您的网站。

规则＃3：从内容出发进行设计

要确定断点的位置，您可以选择使用320px，375px，768px和1024px等值，这些值都映射到各种实际设备宽度。基本上，设计特定设备。但是当新设备变得更受欢迎时（＃375IsTheNew320），您的设计在这些设备上可能看起来不那么好。

撰写有关响应式设计工作流程一书的斯蒂芬·海伊建议你从小屏幕开始，然后“扩展直到它看起来像狗屎。是时候断点了！”

这种对内容的关注将迫使您将网站视为固有的流动性。您不能只设计像素的完美宽度，因为它们不存在。

快速经验法则：您希望您的行长度大约为70个字符。这可以转换（取决于字体！）到大约36到40 em。

规则＃4：在媒体查询中使用ems

对于特定的设备宽度不再重要，您还应该将这些断点宽度（以像素为单位）切换为ems中的宽度。您的媒体查询基于内容，因此即使是那些使浏览器的字体大小变大或放大了浏览器的人，这也会让您的网站看起来很棒。

您的设计的其余部分将适当调整到这一点，使您的网站更健壮。

规则＃5：最小宽度或最大宽度，选择一个

响应式设计使得系统非常复杂。当您的媒体查询同时使用最小宽度和最大宽度，或者甚至是它们的组合时，您将大大增加复杂性并且推理它变得更加困难。

如果您的所有媒体查询都“向上”或“向下”工作，那么当您的网站看起来不像预期的那样时，您总能知道在哪里查看。您编写的新媒体查询中的CSS将永远不会影响您的早期尺寸。只需找出您需要更新CSS的媒体查询（或更高版本）。

规则＃6：避免固定尺寸

对元素使用固定尺寸可能非常诱人。毕竟，您最喜爱的切换工具可能让您轻松复制它们。如果您不小心，具有固定宽度（或边距）的元素可能很容易破坏您的布局。

尝试根据周围环境设计元素大小。使用百分比或视口单位。避免设置width，height并尝试使用他们min-和max-值。如果你最终在某个地方破坏了width， max-width:100%可以创造奇迹。

规则＃7：使用现代布局技术

为了扩展先前的规则，现代布局方法（如Flexbox和CSS Grid）根据其周围环境构建，具有固有的灵活性和大小。如果您使用这些布局方法，您最终需要较少的媒体查询才能实现相同的设计。较少的媒体查询意味着更少的推理，并且您的代码启动时间更短。

Every-layout.dev是（重新）学习如何使用Flexbox和CSS网格建设共同的布局的一个好方法。它列出了通用布局并解释了如何使用现代技术构建它们。

规则＃8：为文本呈现差异留出空间

在发生不利的换行的地方创建断点很诱人。获得“像素完美”。当然，我们知道网络不是像素完美，它从来没有。

如果你的断点太接近可读的换行符，那么它可能在你的浏览器中有效，但是不同的浏览器和不同的操作系统有不同的渲染文本的方式，这意味着文本行可能是更宽或更小的几个像素，你的设计可能会破裂。

相反，试着对你的媒体查询放松一点，在你的设计发生重大变化之前，留出一些空间让事物偏离几个像素。

规则＃9：在浏览器中决定

要遵循这些规则，在设计工具中创建所有断点是没有意义的。另一方面，在浏览器中设计整个站点也很困难。那么幸福的媒介是什么？

在设计工具中创建您的设计，具有一些粗略的响应变体，但是当您实际在浏览器中工作时，可以选择何时切换到另一个设计。Sketch画板可能是750px宽，但是如果你在浏览器中，布局已经在44em（704px）更合理，那么请在你的CSS中使用44em。

规则＃10：尝试使用Polypane

使用Polypane，以移动优先的方式创建网站和应用程序，内容完成的方式很自然。从单个面板开始，设计最小的屏幕。然后添加一个新的面板，并扩大它，直到引用Stephen，它“看起来像狗屎”。然后检查面板的宽度并将该em值用作新断点。设计它并重复。

 

原文地址：https://polypane.rocks/blog/responsive-design-ground-rules