响应设计是以一种以用户可读的方式以任何类型的设备或屏幕大小表示所有重要信息的方式来安排布局的过程。

大多数设计师将选择流体网格布局，因为它更容易处理在不同类型的设备中基于网格的布局。

什么是流体网格布局？

在我们开始考虑设计之前，了解流体网格的意义是很重要的。没有比维基百科给流体下的定义更好的解释了。

流体是一种在应用的剪应力作用下不断变形(流动)的物质-维基百科

所以我会用简单的实际术语来解释上面的定义。在网页设计中，流体将是我们的设计或布局，剪应力将是屏幕大小或用户设备。不管设备或屏幕大小如何，流体设计中的组件都会流动并适应用户环境。

流体网格的重要性

在自适应网格中，我们定义了基于像素的维数.因此，我们将不得不在某些设备视图中手动调整宽度和高度。由于流体网格在其父容器的尺寸内自然流动，因此需要对各种屏幕尺寸和设备进行有限的调整。

移动设备的体积越来越小，人们更喜欢在个杭州网站建设培训学校人工作中使用移动设备。另一方面，桌面显示器的分辨率越来越高。因此，我们无法在响应性设计中为较小的设备进行规划。

流体网格的优点是，我们可以调整最大宽度，它仍将工作在较大的屏幕，因为百分比的计算。

流体网格是如何工作的

我们过去用960px系统设计固定网格。然后，通过在不同屏幕尺寸上使用不同的像素大小，使布局变得自适应。这都是基于像素的布局设计。现在是时候创建基于百分比的设计了，也就是所谓的流体设计。

在流体网格中，我们定义了设计的最大布局尺寸。网格被划分为特定数量的列，以保持布局的整洁和易于处理。然后，我们设计了每个元素的比例宽度和高度，而不是基于像素的尺寸。

因此，每当设杭州网站建设培训学校备或屏幕大小更改时，元素将根据指定的比例调整其宽度和高度，以适应其父容器。

在深入研究流体网格之前，让我们先来看看一些很酷的流体设计，以了解流体布局是如何工作的。

尘土飞扬的卡特里奇

Palantir.net

着装负责

流体网格系统和发电机

从头开始创建流体网格并非易事，需要时间和精力。因此，明智的做法是选择现有的CSS网格框架或网格生成器作为布局设计的基础。下面是一些免费的CSS网格系统和生成器。

• 微流体网格
• 启动流体网格

大多数CSS网格框架都有高级内置的特性，并且已经在许多浏览器上进行了测试。本教程的目的是了解从上到下的流体网格。因此，生成一个流体网格是明智的，这将使您能够学习流体网格的基础知识。

我将使用可变网格系统根据我们的喜好生成一个流体网格。按照此链接调整变量值。我将使用以下值。

• 柱宽-60
• 栏数-12
• 排水沟宽度-20

查看演示

然后下载CSS文件的流体版本。现在，在您喜欢的文本编辑器中打开它，搜索Grid>12列。下面的代码显示了Grid>12列部分的内容。

.container_12 .grid_1 {
    width:6.333%;
}

.container_12 .grid_2 {
    width:14.667%;
}

.container_12 .grid_3 {
    width:23.0%;
}

.container_12 .grid_4 {
    width:31.333%;
}

.container_12 .grid_5 {
    width:39.667%;
}

.container_12 .grid_6 {
    width:48.0%;
}

.container_12 .grid_7 {
    width:56.333%;
}

.container_12 .grid_8 {
    width:64.667%;
}

.container_12 .grid_9 {
    width:73.0%;
}

.container_12 .grid_10 {
    width:81.333%;
}

.container_12 .grid_11 {
    width:89.667%;
}

.container_12 .grid_12 {
    width:98.0%;
}

如您所见，CONTER_12是主容器。我们设计中的每一个元素都应该在一个容器内，容器的类为12。然后，将基于百分比的宽度分配给具有.Grid_1、.Grid_2…的类。.网格_n.

流体网格是使用被认为是流体柱的柱来建立的。当屏幕大小改变时，这些列的宽度将按其父容器的比例调整。

我们的网格中有12个流体柱。因此，让我们来看看列是如何在我们的布局中堆积起来的。

上述部分的代码如下所示。您可以查看下载的文件以获得更多信息。

Fluid Grid with Fluid Columns
       	

每组件都包含在一个具有类容器_12的元素中。在容器中，我们可以使用Grid_n类创建具有特定宽度的流体列。

使用网格1将给出原始网格的1/12宽度，网格2将给您2/12。

您可以加载演示并调整浏览器的大小，以查看网格列的流动性。

NAMS-NCs

当您有一个CSS框架时，创建一个包含流体列的网格非常简单。但并不是所有的设计都像前面显示的布局那样简单明了。我们可能需要在其他列和行中创建列和行。

父列中包含的列称为嵌套列。让我们看看如何使用前面生成的CSS文件创建嵌套的流体列。

查看演示

上面给出的布局包含2行。第一行被划分为6列的2节，2节中的每一节再次被划分为3列的4节。

同样，第二行被划分为4列的3节，3节中的每一节再次被划分为4列的3节。这就是如何在网格中创建嵌套列。让我们看看如何编写上面的布局。

NAMS-NCs
       	

首先，我们创建主容器和列，就像我们在上一节中所做的那样。在列中，我们需要为嵌套列创建另一个容器，容器_12类。

现在，我们在主要的6列中又得到了12列。然后在必要时可划分12个子列。现在，您应该对创建流体网格和使用嵌套列有明确的了解。让我们在流体网格中更进一步。

超越流体网格的设计

大多数刚刚起步的设计人员认为，使用响应性CSS框架将使您的设计响应性强。不幸的是，响应性设计并不那么简单。流体网格将适应浏览器窗口或设备的变化。

除非您仔细规划设计，否则当您使用流体网格时，用户将在较小的设备上浏览您的内容。

请考虑下面的屏幕。

这就是前面章节中讨论的流体网格将如何在小屏幕上显示的方式。这些只是没有适当数据的网格列。即使在这种情况下，数字1也没有正杭州网站建设培训学校确显示。

当涉及到真正的内容时，它将是一片混乱。在这个场景中，我们需要调整列的宽度，以提供更好的用户体验。

您可以使用CSS媒体查询来调整不同屏幕大小的列的宽度。在上面的场景中，您可以将列宽度增加一倍，保留6列而不是12列，以提供更好的内容可读性。因此，确保在响应性设计中不要只依赖流体网格。

FluidGrids测试

现在我们已经完成了流体网格的基础知识，我们可以使用jQuery创建一个简单的演示来测试不同屏幕大小的流体网格。首先，我们将创建页面布局和导航，如下所示。

查看演示

Fluid Grid Tester

我们的测试页面有jQuery的基本HTML布局。元素将包含标准设备(如台式机、移动电话和平板电脑)的导航。单击链接后，会以类型设备作为参数调用changeGrid函数。

在底部，我们有一个iframe，将用来加载我们的流体网格。流体网格包含在media_query.html文件中。现在让我们看一下changeGrid函数。

function changeGrid(device){
               if(device == "desktop"){
                   $(".wrapper").css("width","960px");
               }
               if(device == "tab_lan"){
                   $(".wrapper").css("width","768px");
               }
               if(device == "tab_pot"){
                   $(".wrapper").css("width","600px");
               }
               if(device == "mob_lan"){
                   $(".wrapper").css("width","480px");
               }
               if(device == "mob_pot"){
                   $(".wrapper").css("width","320px");
               }
           }

一旦函数被调用，它将使用传递的参数检查设备。然后，它将把包装器(Iframe)的宽度更改为设备的标准宽度。然后我们将能够看到流体网格如何在较小的屏幕上工作。

在media_query.html文件中使用的流体网格将类似于我们在前面一节中讨论的示例。您可以使用演示文件自定义代码。您应该有类似于下面的屏幕作为测试屏幕。

下载源文件

Wrap Up

流体网格允许您创建符合动态屏幕大小的响应设计。使用现有的CSS框架可以最小化开发流体网格的复杂性。你不能仅仅依靠流体网格为你提供完美的响应性设计。

根据您的设计需要调整流体网格，并尝试为用户提供最佳杭州网站建设培训学校的浏览体验。