# 画布

码良画布切换功能

一段时间以来，码良是没有画布概念的，系统仅提供了一个 320 x 500 的页面操作区，输出页面在终端设备渲染时，通过对视口（viewport）的缩放完成对不同尺寸终端设备的适配。单一画布使得终端适配变得简单，也确实能满足市面上大部分移动终端设备的页面合理展示，但是问题总是存在的：显而易见，320 的画布使得码良不具备制作桌面端页面的能力，并且，由于 320 的画布绝对尺寸略小，会造成一些在视口缩放过程中的损耗。

引入画布概念以后，码良内置了 4 个画布，其中三个为移动端画布，剩下一个为桌面端画布。参见题图。

# 移动端画布

现在码良编辑器内置了三个尺寸的移动端画布，分别为 320 x 500、360 x 600、414 x 700，使用上和之前的单一画布没有区别，根据自己的需求和设计稿的尺寸（以方便换算为原则）选用合适的画布即可。

# 桌面端画布

桌面端画布迟迟未被推出的原因是多方面的，比如，如何设计新的交互来充分利用场景区的空间，如何采用新的组件排布方式来使得桌面端页面制作更符合直觉，如何进行桌面设备的适配等等。桌面端画布的推出即是以上问题解决的过程。

# 浮动操作面板

将工作区切换到 PC 布局时，可以看到，除场景区以外大部分操作面板都以浮动面板形式存在，这样给场景区留下了足够的空间来预览和操作组件。浮动操作面板可以停靠在屏幕两侧，折叠隐藏到屏幕以外，也可以拖动到工作区任意位置。另外，将鼠标移动到任意浮动面板之上，该浮动面板即会置于顶层，方便用户操作。

# ”楼层模式“

在属性面板，可以为当前组件设置布局模式。布局模式决定了其直接子组件的位置排布方式，当设置为”楼层模式“时，子组件如楼层般依次向下扩展，当设置为”自由模式“时，子组件上下堆叠，位置可自由挪动，也就是此前的默认布局方式。

设置了”楼层模式“的组件，因其子组件依次向下排布，我们可以将该组件的高度禁用（样式面板-高-禁用，实际被设置为 auto），这样组件就可以根据子组件的累加高度自动获得高度。

实践下来，”楼层模式“更适合桌面端页面的制作，当切换画布到桌面画布时，如果根组件（root）的布局模式不是”楼层模式“，则会自动切换到楼层模式。

楼层模式并非只适用于桌面端页面的制作，对于移动端页面，同样可以使用”楼层模式“，根据需求在根组件（root）上使用或者局部使用（作用于非根组件）。

# 居中

对于应用了”楼层模式“的组件，其子组件样式面板多了一个居中选项，开启后，组件将自适应不同宽度设备居中显示。

# 相对单位

桌面端页面的适配不再能通过简单缩放视口（viewport）实现，因此，在制作桌面端页面时，对于依赖设备宽度的组件样式，应使用相对单位 %，如通屏组件应该设置宽为 100%。

# 12 栏布局

桌面端网页设计一般会依赖一些栅格系统，比如 bootstrap 采用的 12 栏布局，码良的桌面画布提供了一个宽度为 1140 的居中区域，并将其分为 12 份，调整组件位置和大小时，这些栅格线会作为一系列参考线，辅助页面布局。

同时，码良系统提供了一个分栏布局组件，内置了 12 栏布局的各种组合；也可以脱离 12 栏的设定，自由配置各个组件所占宽度比重。是组件沿页面横向布局的重要工具。