t3 架构的模板可以很容易去实施响应式的设计，你可以为单独设计布局在不同条件下的变化 ... 下面我们一起来看一下 ...

在布局的模块位置配置界面 ... 先指定在 feature 区块上要显示的模块位置 .. 我们只想在这里使用两个模块位置 ... 点击下面的 数字 2...

这样这个区块只会显示 feature-1 还有 feature-2 ...

再找开模块管理 ... 可以在新的窗口打开 ...

这里我事先创建了几个自定义 html 模块的区块 ... 手工在里面输出了一些内容 ...

打开这个 epic ... 指定这个模块的显示位置 .... 搜索 feature ... 选择 feature-1 ... 保存并关闭 ..

再打开 demo 模块 ... 搜索 feature ... 选择 feature-2 ... 保存并关闭 ..

去前台预览一下 ... feature 区域上会显示这刚才发布的两个模块 ...

回到模板的管理界面 ...

打开 响应式布局 这个选项卡 ... 在这里，你可以设置布局在不同条件下的显示 ... 这些条件其实就是判断浏览窗口的宽度 ...

在一定的宽度范围会使用相应的设置 ...

当前选中的是 宽屏 .. 一般在大屏幕的桌面电脑上，都会使用这里的设置 ...

找到 feature 区块 ... 鼠标放在这个三个方点的竖线上 .. 左右拖动 ... 可以修改模块位置占用的宽度 ...

这里你所做的修改只会影响到当前选中的设备的布局 ... 先保存一下 ...

回到前台 .. 刷新 ...

你会看到 ... 模块占用的宽度就发生了一些变化 ... epic 占用了 8 个网格 ... demo 占用了 4 个网格 ..

我们可以再设置一下浏览窗口的尺寸 ...

缩小到一定宽度的时候，两个模块双恢复成了各占一半的宽度 ...

因为我们只是改变了布局在宽屏电脑上的显示 ...

这里我们可以借助一个工作来测试页面响应式的设计 ... 可以使用 chrome 浏览器的 Web Developer 扩展 ... 你可以在 chrome 商店里免费下载到 ...

点击这个小齿轮的图标 ... Resize ... View Responsive Layouts ...

这样在同一个页面上，你会看到在页面在不同设备上的显示 ... （# 浏览并关闭）

再回到模板管理界面 ...

这次我们看一下页面上 手机 上的布局 ...

你会看到在手机上，模块位置都会堆叠在一起显示 ... 另外要知道的是 ... 模块位置的右上角有一个眼睛图标 ...

点击这个图标，会把模块位置在当前所选设备上隐藏起来 ...

比如我们想在手机上隐藏 feature-1 这个位置 ... 点击眼睛图标 ... feature-1 会出现在隐藏的区域上 ...

保存 ...

回到前台 ... 刷新 ... 发布在 feature-1 位置上的 epic 模块仍然会显示 ...

调整页面的宽度 .... 当我们把页面宽度调整成跟手机屏幕的宽度差不多的时候 .. feature-1 上的 epic 模块就会隐藏起来了 ...