mshflexgrid 网格大小 随着窗口变化_如何使用响应式网格

 本篇文章将介绍PC端和移动端的Web响应网格设计，在深入探讨问题之前，让我们先了解一下有关响应式网格的术语。

字段元素(field element)是您的设计模块，无论是文本，图像还是两者的组合。除非背景颜色是文本/图像的容器，否则背景颜色不会真正算作字段元素。

列(columns)是构成设计内容宽度的较粗的彩色块。字段元素应位于一定数量的列上。传统上，在设计系统中，列宽不变，但列数从台式机上的12更改为平板电脑上的8，移动设备上为4。您可以使用任何字面值，但是大多数网格的列宽为60–80px。选择最适合您的列宽是最重要的，因为它是内容宽度的主要决定因素。

边距(gutters)也称为外部装订线，是内容宽度之外的空白空间。边距随着设备宽度的增加而增加， 移动设备上的边距通常为20–30像素，而平板电脑和台式机之间的差异很大。无论选择什么作为边距，都将是收缩浏览器时允许的最小空白空间。从这一点开始扩展浏览器时，在下一个断点之前将有更多的空白。

响应式网格的基本准则：

1.字段元素必须位于一定数量的列上

您可以按照自己的喜好将其拆分成6和6、3、4、4、3等。示例是一个配置文件卡，它位于不同数量的列上。 

 有时候，如果您实际上将它们完美地放在网格上，它们会看起来会太宽。请参见下面的经典“操作方法”模式： 

如果我们将它们放在网格上，则文本会延伸得太长。

2.不要将字段元素留在边距范围内

您的元素应位于列内，而不要侵犯到边距范围。

3.可以将元素嵌套在不与网格对齐的字段中，只要父字段本身位于列上即可

现在有些时候，您想用图像和文本将设计或卡片准确地分割成一半，在这种情况下，您会遇到这种尴尬的情况，即图像不落在列上，文本被强制容纳在其中。不用担心，只要整体模块位于列中即可。

4.留出边距

您所有重要的内容都应适合内容宽度。因为如果您不习惯使用网格，您会感觉到网格就是画板，并且需要在设计中添加填充。这就是侧边距的确切用途，它们是设计的额外填充。根据其编码方式，网格内的内容将开始按比例缩放，并且边距将固定不变，或者边距将与内容同时缩放。

因此，如果有人说“我需要一个1200px宽的设计”，那并不意味着您的设计实际上就是1200px宽。这意味着您的内容宽度位于960px的画板中，大约为960px，因此您仍有空间留出边距。

5.完整的出血元素(bleed elements)或纹理图形应从画板的一端到另一端

这是规则4的例外-当您的背景颜色或图像已完全出血时。在这种情况下，您可能希望在模型中将其拉出网格。

如果您有图像装饰需要渗出页面，并且可以将其进行剪切，这时候也可以脱离网格。

页眉和页脚有时也可以有自己的例外，它们不被视为内容的一部分。有些设计将它们固定在浏览器的边缘，有些则希望将其固定在内容宽度内。这完全取决于具体情况。

响应式网格是如何工作的

在传统的设计网格中，列宽和装订线保持不变，只是列数发生变化。如果一组三张卡片分别放在台式机的4列中，那么在平板电脑上，您将显示两张卡片，然后包裹第三张卡片，以便在第二行显示。您无需进行任何大小调整，因为您已经知道它位于四列中。在移动设备上，答案也很容易，您只需要出示一张卡，其余卡堆在卡下即可。如果需要，您也可以发挥创意，并选择仅在移动设备上显示一张卡片，或进行水平滚动。这些断点是代码中的参考点。

实际上，网络必须针对任何浏览器宽度进行渲染。举例来说，假设您有一台大型显示器，可以看到1600像素宽的内容，台式机设计为1200像素宽，平板电脑为768像素宽，而移动设备为360像素宽。因此，现在您所看到的是一种设计，其内容宽度略小于1200像素，并且有很大的余量，因为您使用的是大型显示器。但是，当您的浏览器缩小1像素(1199像素)时会发生什么情况？

固定网格(fixed grid)

如果您的开发人员编写了固定的网格，那么当您从台式机扩展到平板电脑时，您将到达下一个断点(breakpoint)，并且大量的边距会缩小，直到下一个断点。文字不会自动换行，图片不会动态更改。如果您的开发人员在确定所有尺寸时都不太谨慎，则可能会错过断点，并且您的设计可能会被切断。但是等到达到768px的断点后，设计就会迅速安装到位，并且平板电脑看起来也不错。如果缩小到最小，则将发生相同的情况，直到达到另一个断点为止，您的设计将保持不变。

流体网格(fluid grid)

‍

随着窗口的缩小，事物将动态变化，文字会自动换行，元素会越来越狭窄。但是，在您到达设计的下一个断点之前，这些元素仍然不会更改布局。

混合网格(hybrid grids)

在体验中结合使用流体网格和固定网格也是一种常见的做法。由于设备尺寸多种多样，当移动尺寸减小时，网页通常很不稳定。

总结

本文提供了有关如何在响应式设计中使用网格的一些指导。了解网格的工作原理可以帮助我们成为更好的设计师：确保设计合理，像素完美，将会为我们带来更一致性和简洁的设计，特别是在实际项目运用中，它能帮助提高最终产品的质量。

---

感谢您的阅读：)