什么是流体设计，它如何在网站上使用？

的日益受欢迎智能手机和平板电脑已经离开网页设计师这是一个相当大的挑战——创建在线体验，不仅显示在一个标准的浏览器窗口，而且还显示在一小部分的屏幕上。

“为什么不只是缩小它？”可能已经问过一个年轻，更天真的版本。“只需拍摄桌面版本并使其变小。问题解决了！”如果真那么简单就好了...

实际上，每一个成功的网站都需要考虑到移动用户。现在也有优先考虑移动接口的Web开发框架。大多数在线企业都不能丢失具有差的设计和可用性的移动用户。

我们需要担心的不仅仅是更小的屏幕——视图(屏幕上显示网页的区域)也在向另一个方向扩展，这要归功于更宽的台式机和智能电视。那么，我们需要什么解决方案来适应屏幕形状和大小的范围呢?

在这篇文章中，我们将探讨解决这个问题的一种方法，流体的网页设计。您将了解哪些流体设计，它是如何运作的，以及如何与其他设计提出，因此，您可以决定扩展您的网页的最佳方式和它们内部的元素。

让我们假设一个网站有三个相邻的元素，其中一个的宽度设置为50%，两个较小的元素的宽度设置为20%(对于这个演示来说，高度不重要)。让我们在它们之间加上一些边距。

在浏览器窗口中显示1000像素宽，网站看起来像这样：

每个元素的像素宽度是基于视口的1000像素宽度。

当我们将浏览器窗口缩小到600像素时，流动设计会按比例缩放这些元素:

流体设计可确保网站在布局中始终看起来相似，而不管屏幕如何。一致的布局在确保尽可能多的访客的可用性时受益于用户体验。

网页设计中的流体网格

流体栅格是流体设计方法的常见实现。流体栅格将页面的宽度分成几个同样尺寸和间隔的柱。根据这些列放置页面内容。

当视口水平扩展时，每个流体列都会相应扩展，列中的内容也会相应扩展:

图像源码

网格是一种广泛应用的布局，以易于理解的方式结构化页面内容，将流体原理应用于网格是使网格适合不同屏幕的一种方法。

然而，流体设计不是唯一的方法 - 让我们用三个其他常见的布局设计进行比较：固定，自适应和响应。

固定设计vs流体设计

遵循固定设计的布局不符合视口大小。与流体设计和流体栅格中的那些不同，固定布局中的元件被设定为特定的像素宽度，并且这些宽度不会通过设备或屏幕尺寸而改变。

固定设计在设计人员之间丧失了良好的利益，以缺乏设备缺乏灵活性和用户友好性。您将被努力发现它适用于任何专业网站 - 现在通常用于流体，自适应和/或响应网站。在大多数情况下，值得努力而不是坚持固定大小。

适应性设计vs.流体设计

流体布局有助于使网站更具可用性，但它们缺乏对自适应设计的微调控制。在自适应方法中，设计人员为特定屏幕宽度创建多个单独的网站布局，目标是迎合多个特定设备。因此，网站可能有一个单独的布局设计，用于在桌面，平板电脑和智能手机上查看。

网站设计者利用媒体查询实现自适应设计，这是网站的一个特点CSS它可以检测用户设备的属性，包括屏幕尺寸。媒体查询读取屏幕大小，然后从多个固定布局选项中选择最适合的固定布局。

流体设计在非常大或非常小的屏幕上可能看起来很笨重，而适应性设计让我们能够针对特定的设备做出更精确的布局。如果你考虑到他们使用的任何设备，你不需要担心糟糕的用户体验。

这里的权衡，也许很明显，适应性设计比流动设计花费更多的时间。从本质上说，你是在创建多个布局，而不是一个单一的动态布局，所以这种方法对单个网站所有者来说可能是不可持续的，特别是当新的设备进入市场时。

响应式设计vs.流体设计

你可能听说过“响应式”这个词，用来描述任何根据不同设备调整布局的网站。从这个意义上说，流体和适应性设计在技术上都是“响应性的”。

然而，术语变得有点令人困惑 - “响应”可以也请参考作出这些调整的特定方法。这里我将讨论后一种意义上的响应式设计。

响应式设计布局是应用于网页的单一布局，它根据断点重新格式化和调整元素的大小。断点是一个特定的视口宽度值(以像素为单位)，它触发了网站布局的变化。中断点在CSS中与媒体查询一起设置。

与流畅的设计不同，响应式网站使用断点来重新排列或消除页面上的元素，而不是简单地调整它们的大小。因此，响应式布局在台式机、平板电脑或智能手机上可能会显得非常不同。

以服装品牌的响应式网站为例kotn.为例。它的断点设置为960 px和560 px。当我缩小浏览器窗口时，请注意这些断点的效果。

图像源码

这里还不仅仅是收缩元素的宽度，尽管这也是设计的一部分。而且，也是内容本身是变化的

响应式设计是商业网站的首选，具有丰富的内容，高度交互性的页面。尽管响应式设计比纯粹的流动页面需要更多的工作来实现，但它可以确保文本、媒体和交互元素在任何宽度下都看起来很好，特别是当简单地缩小页面元素的宽度并不能保证良好的可用性或美感时。

什么时候应该使用流体设计?

流动设计不是万能的，响应式或适应性设计也不是。这些方法也不必孤立使用——它们中的任何一个原则都可以结合在一起来改善移动体验。

在考虑流体设计时，您应该考虑：

• 观众指标：跟踪工具喜欢谷歌分析可以通过桌面，平板电脑和移动电话分割您的流量。使用指标通知您将您的设计资源放在哪里。bob体育苹果系统下载安装
• 网站内容：如果您的网站相对较轻文本，媒体和互动功能，则可以在某些或所有页面上使用纯粹的流体设计。否则，最好纳入适应性和响应性原则。用线框图映射布局在这个阶段是有帮助的。
• bob体育苹果系统下载安装由于其相对简单，流体设计通常需要更少的时间、金钱和精力从零开始。然而,网站建设者随着禁止开箱即响应的页面模板，对于缺乏设计排骨的人来说，更加可达到复杂的响应页面。

最后，如果您在页面上整合了流动元素，请在从智能手机到大型桌面浏览器窗口的各种屏幕尺寸上测试您的站点。如果没有关于如何适应特定维度的具体说明，纯流动的方法可能无法完善您的用户体验。但是，它可以让你非常接近。