文章插图
流动网格中，随着网页的尺寸变化，整个元素的大小随着网页的发生着改变 。
文章插图
在设计的过程中选择流动网格还是固定网格，主要取决于网页的内容，图片和文字可以随着网页的变化而变化，可以选择使用流动网格，反之则是固定网格 。
这里还是要再强调一下，网格类型主要是指网格的模式，是固定的还是移动的，和我们在设计中的网格系统有一定的区别 。
接下来，Adobe 的Xd 这个软件的实际操作，给大家讲解一下 。在设计响应式网页的时候，如何去按照不同的端口去设置网格系统 。
文章插图
首先我们打开页面后，点击右下角画板，会出现网格的菜单，点击版面按钮，版面网格就建立完成了 。
文章插图
建立好版面网格后，下方的数值，它们分别代表着不同的设定，我们一个一个来讲解 。
文章插图
首先是列，这个概念比较清晰，就是网格中的矩形框，这里设置了12列 。
文章插图
间隔宽度则是矩形框之间的距离，这里设置了16像素 。
文章插图
列宽则是矩形框的宽度，这里是135像素 。
文章插图
响应式网页的网格系统分为两种，第一种是间隔宽度固定的形式 。这种网格的形式是网格中的间隔宽度始终保持不变 。
文章插图
我们现在来看这个网页，它是一个流动网格的形式，网格系统使用的是间距宽度固定的类型 。
文章插图
文章插图
无论网页是怎么收缩和调整的，间距是始终保持不变的 。
文章插图
文章插图
在Adobe Xd 软件中就可以直接操作了，模拟收缩网页的方式，右下角的间隔宽度始终保持不变 。
文章插图
电脑端的部分设置完成以后，因为是同样的网格系统，就可以直接移植到其他的屏幕尺寸中去 。
文章插图
最后到了手机端，这里大家会明显地发现，元素的尺寸变小了，而且单屏展示的内容丰富程度提升了 。
文章插图
相比第一种形式的网格形式，第二种形式是栏数上呈现着每个设备的栏数都不固定的特征，这也是现在比较流行的网格系统的设置方式 。
文章插图
再回来看谷歌的指导手册，红色部分有固定使用的栏数 。由于手机端的尺寸较小，放置12栏的网格，会显得很密集，可以按照谷歌指导手册的栏数规定进行设置 。
文章插图
这里也同样可以在xd中进行操作 。点击工具栏的画板按钮，右面会出现很多的预设，这个预设会定期更新 。
文章插图
文章插图
点击一个平板的预设，就会自动地帮我们设置好8栏的版面网格 。继续可以选择手机端的预设，设定出一个4栏的版面网格 。这样三个端口的网页就已经全部设定好了 。
推荐阅读
- 英式红茶的功效与作用,英式罐装红茶的泡法
- 什么红茶要洗茶,怎样泡红茶
- 英式红茶泡几次,英式罐装红茶的泡法
- 英式红茶图片,英式泡红茶最好
- 英式红茶茶具品牌,英式罐装红茶的泡法
- 饵料|《师傅请赐教》中年男人解压方式竟是夜钓？背后原因让人深思
- 欧式红茶泡法,祁门红茶品牌都有什么
- 安兔兔|安兔兔4月安卓手机性价比排行榜：2000元以下被moto edge S30碾压式屠榜
- web前端移动端最流行的网页布局技术：flexbox弹性布局学习详解
- 一文讲清楚SpringBoot六种读取配置方式