现代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也提供用来控制打印机的显示与隐藏的辅助类。显示和隐藏不能同时使用。
.visible-print
:在打印时显示,在浏览器正常浏览时隐藏。.hidden-print
:在浏览器正常浏览时显示,在打印时隐藏。