section: basic id: responsive description: 多种屏幕尺寸响应 icon: icon-tablet filter: xiangyingshibuju xysbj --- # 响应式设计 现代 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`：在浏览器正常浏览时显示，在打印时隐藏。 默认情况下，响应式显示辅助类 `.visible-*` 会将元素的 CSS `display` 属性设置为 `block`（表格元素 ``、``、`` 除外）。如果期望在显示时将 `display` 属性设置为 `inline` 或者 `inline-block`，应该将 `.visible-*` 与 `.inline` 或 `.inline-block` 一起使用。 在页面加载完成和页面窗口宽度变化时，`` 标签上还会自动添加以下辅助类用于为不同的屏幕尺寸应用外观（此功能需要 ZUI 的 JavaScript 实现）：
屏幕尺寸 html 标签上的辅助类
屏幕宽度<768px .screen-phone
768px<=屏幕宽度<992px .screen-tablet
992px<=屏幕宽度<1200px .screen-desktop
屏幕宽度>=1200px .screen-desktop-wide
屏幕宽度>=992px .device-desktop
屏幕宽度<992px .device-mobile
## 设备类型和系统检测 针对不同的操作系统，会在页面加载时为 `` 标签自动添加以下辅助类方便为不同的设备系统应用不同的样式（此功能需要 ZUI 的 JavaScript 实现）：
系统和功能类型 html 标签上的辅助类
Windows 操作系统 .os-windows
Mac 操作系统 .os-mac
Android 系统 .os-android
iOS 系统 .os-ios
Linux 系统 .os-linux
Unix 系统 .os-unix
触摸屏设备 .is-touchable
## 禁用响应式设计 有时你所开发应用仅针对一个设备或平台，并不需要响应式设计。 在 ZUI 中响应式设计是一个全局的思路，默认情况下大部分组件如有必要都会启用响应式设计。如果需要在你的网站中全面禁用该功能，请参考下面的建议： * 移除 `` 标签，禁用移动设备缩放可视窗口尺寸。 * 避免使用一些响应式工具类，例如`.visible-xs`、`.visible-sm`、`.visible-md`、`.visible-lg`等。 * 当使用栅格系统时避免使用 `.col-sm-*`、`.col-md-*`、`.col-lg-*`，统一使用 code>.col-xs-*。 * 使用固定宽度的布局容器（`.container-fixed`、`.container-fixed-md`、`.container-fixed-sm`、`.container-fixed-xs`）来代替响应式设计容器（`.container`）。 * 避免使用响应式组件，应该使用非响应式组件来代替，例如使用导航（`.nav`） 来代替响应式导航（`.navbar`）。
即便 ZUI 为非响应式设计提供了方案，但还是建议使用响应式设计。实现响应式并不需要很多额外的代码和工作，实现响应式设计为跨屏提供了可能性。