部落冲突家乡5本最强布阵部落冲突5本最强布阵( 三 ) _生活百科

当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。

文章插图
四、栅格与响应式的结合1. 自适应与响应式1）自适应
自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是PC端、平板还是手机。
我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。

文章插图
自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。
2）响应式
响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。
响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。

文章插图
2. 栅格行为变化1）固定栅格
将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。
固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显得不够协调。

文章插图
2）流动栅格
流动栅格的边距、水槽宽度是固定不变的，在达到下一个断点前，列的数量也不会增加，列宽会跟随页面宽度左右伸缩，变化规则不一定是最小单位（8px）倍数，内容元素也会随着页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。
我们可以将流动栅格的视觉呈现方式称之为响应式弹性布局，这种布局的兼容性很高，能很好的适应多端设备及不同的屏幕分辨率。对于不同尺寸的卡片混排也能平滑过渡，不会显得突兀，例如：图像、视频、内容编辑器、数据可视化等，除断点变化外，内容元素的缩放不会改变页面的排版布局。

文章插图
3）混合栅格
绝大多数的网站使用的都是流动栅格，但一些后台管理系统及工具型界面设计为了使布局既有固定的宽度、也有流动的宽度，就会采用混合栅格的形式。
混合栅格的灵活性很高，特别是内容较为复杂的产品会显得更加友好，在不同分辨率的屏幕上都能达到理想的视觉效果。不过对于开发来说，规则相对复杂，实现成本较高。

文章插图
五、部分问题及处理方式1. 水槽中不要留下元素这里所说的并非水槽中不能存在内容，而是不要将单个元素或元素的边缘置于水槽内，否则就会参差不齐，违背了栅格的目的。如果你的元素过大，就让他跨越栅格，到达下一个列的右侧边缘。

文章插图
2. 栅格不一定整除虽说设计师对于每一个像素的的追求都很执着，但大部分情况下栅格都是无法整除的，而相差的像素也无法被用户以肉眼觉察。我们需要理解的是，栅格的目的是为了保持视觉的协调与统一，而非像素级的精确。
举个例子，以1920px的宽度、12栅格为例，内容区宽度可以是1000px、1200px、1400px、1600px…，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。