智能手机和平板电脑的日益普及给网页设计师带来了相当大的挑战——创造不仅显示在标准浏览器窗口中的在线体验，并且还显示在一小部分尺寸的屏幕上。实际上，每个成功的网站都需要在规划时考虑到移动用户，现在甚至有优先考虑移动界面的 Web 开发框架。大多数在线企业无法承受网站失去设计和可用性差时，所造成移动用户的损失。
那么，我们必须采用哪些解决方案来适应各种屏幕形状和尺寸？
在这篇文章中，我们将探索一种解决这个问题的方法，即流畅的网页设计。你将了解什么是流畅设计、它是如何工作的，以及它如何与其他设计一起调整大小。
网页设计的页面布局
让我们想象一个网站有三个相邻的元素，一个宽度设置为 50%，两个较小的元素宽度设置为 20%。让我们在它们之间也设置一些边距。当显示在 1000 像素宽的浏览器窗口中时，每个元素的像素宽度基于视口的 1000 像素宽度。当我们将浏览器窗口缩小到 600 像素时，流畅的设计会按比例缩放这些元素，流畅的设计可确保网站在布局上始终看起来相似，无论屏幕如何。一致的布局有利于用户体验，同时确保尽可能多的访问者的可用性。
网页设计中的流体网格
流体网格是流体设计方法的常见实现。流体网格将页面的宽度分解为几个大小相等且间隔相等的列，页面内容根据这些列放置。
网格是一种广泛的布局，用于以易于理解的方式构建页面内容，将流体原理应用于网格是使网格适用于不同屏幕的一种方法。
在Pixso中，不仅支持为流体分析输出网格，也支持向主流的结构分析软件输出网格，同时Pixso还具有良好的操作界面，且兼容主流设计软件的文件格式和各种中间格式。
流体设计在网页设计中并不是唯一的方法——让我们将它与其他三种常见的布局设计进行比较：固定、自适应和响应式。
在pixso设计页面，可以直接一键代入设计、原型布局功能
固定设计与流体设计
遵循固定设计的布局不符合视口大小。与流体设计和流体网格中的元素不同，固定布局中的元素被设置为特定的像素宽度，并且这些宽度不会因设备或屏幕尺寸而改变。
固定设计由于缺乏跨设备的灵活性和用户友好性而失去了设计师的青睐。你很难发现它适用于任何专业网站——设计师现在通常用于流畅、自适应和/或响应式网站。
流体设计的布局与固定设计布局不同点就在与对网站尺寸的测量单位不同。流动布局使用的百分比提供了很强的可塑性和流动性。换句话说，通过设置了百分比，设计时将不需要考虑设备尺寸或者屏幕宽度大小了，流体网格可以为每种情形找到一种可行的方案，它的尺寸将适用所有的设备尺寸。
自适应设计与流体设计
流畅的布局有助于使网站更易于使用，但它们缺乏对自适应设计的微调控制。在自适应方法中，设计师为特定的屏幕宽度创建多个单独的网站布局，目标是迎合多种特定设备。因此，一个网站可能有一个单独的布局设计，用于在台式机、平板电脑和智能手机上查看。
虽然流畅的设计在非常大或非常小的屏幕上，可能看起来很笨重，需要让应用填充可用的显示空间但又不太显拥挤，但自适应设计让我们可以为特定设备制作更精确的布局。
制作网页时，设计师会发现自适应设计比流动设计需要更多的时间来制作。从本质上讲，你正在创建多个布局而不是单个动态布局，因此对于单个网站所有者来说，这种方法可能不可持续，尤其是当新设备进入市场时。
因此设计师们在设计网站时，可以把自适应设计与流体设计相结合，这样设计出来的网站便可以根据不同的屏幕尺寸，内容自动调整流动。
响应式设计与流体设计
你可能听说过“响应式”一词来描述任何针对不同设备调整其布局的网站。从这个意义上说，流动和自适应设计在技术上都是“响应式”的。
然而，术语在这里变得有点混乱——“响应式”也可以指进行这些调整的特定方式。在这里，我将讨论后一种意义上的响应式设计。
Pixso试图帮助那些毫无编程概念的设计师将自己的创意发挥出来，它能够根据浏览网页设备的不同自动对网页进行在线响应式网页设计，兼容的设备平台包括了 PC、 平板和智能手机。最后用户在完成从设计到 CSS 构架之后，甚至可以在线直接将建好的网页发布，而不需要导出代码到其他发布工具上。
与流畅的设计不同，响应式网站使用断点来重新排列或消除页面上的元素，而不是简单地调整它们的大小。因此，响应式布局在台式机、平板电脑和智能手机上可能看起来完全不同。
除了缩小元素的宽度之外，这里还有更多的事情要做，尽管这也是设计的一部分。内容本身也在变化，响应式设计是具有内容丰富、高度交互性页面的商业网站的首选。尽管它们比纯粹的流动页面需要更多的工作来实现，但响应式设计可确保文本、媒体和交互元素在任何查看宽度下看起来都很棒，尤其是当简单地按宽度缩小页面元素并不能保证良好的可用性或美观性时。
设计师们都知道多终端的不同、场景的差异性其实不是单纯的响应式设计能解决的。流体设计的核心就是在美观的前提下，应用程序的使用更加自然和流畅，运用在各种网页设计布局上，不仅可以保持界面的美观流畅，在保障业务高效发展的前提下，制定一套在多终端间流转的设计规则，为用户提供更好的浏览体验。
