现代web应用应该支持响应式布局。栅格系统已提供良好的基础构建响应式布局页面,同时也提供一些辅助工具类来控制内容在不同设备的展现方式。

在ZUI中提供针对4中不同尺寸的设备屏幕进行分别控制。

屏幕 名称 尺寸
超小屏幕(手机) xs <768px
小屏幕(平板) sm >=768px
中等屏幕(笔记本电脑) md >=992px
大屏幕(桌面电脑) lg >=1200px

针对4种屏幕类型各定义两种辅助类来在不同的设备上显示或隐藏内容。

超小屏幕 小屏幕 中等屏幕 大屏幕
.visible-xs 可见 隐藏 隐藏 隐藏
.visible-sm 隐藏 可见 隐藏 隐藏
.visible-md 隐藏 隐藏 可见 隐藏
.visible-lg 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

其中显示辅助类.visible-xs.visible-sm.visible-md.visible-lg可以组合使用,同理对于隐藏辅助类也可以组合使用以达到不同的效果。但不要将显示辅助类和隐藏辅助类混合使用。

ZUI也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。

禁用响应式布局

有时你所开发应用仅针对一个设备或平台,并不需要响应式布局。即使这样,也建议你使用响应式布局,因为不需要额外的代码,而且为跨屏提供了可能性。

在ZUI中并没用一个全局的开关来控制是否启用响应式布局。如果确实要禁用该功能,请参考下面的建议: