响应式UI 与 CSS 模块化

80percent 团队内部交流

什么是响应式UI

响应式UI实现要点

• meta 标签
  • viewport
• 断点定义
  • xs
  • sm
  • md
  • lg
• 媒体查询
  • media query

Bootstrap 框架中的响应式

1. 断点定义

• XS( < 768px )
• SM( >=768, <992 )
• MD( >=992, <1200 )
• LG( >= 1200 )

可通过设置变量修改这些值

Bootstrap 框架中的响应式

2. 网格系统

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

覆盖原则: 移动优先, 小屏优先

Bootstrap 框架中的响应式

3. 媒体查询

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

为不同的屏幕设定不同的CSS样式

Bootstrap 框架中的响应式

4. 实用的样式工具

/* XS 屏幕尺寸才显示 */

.visible-xs-block {}
.visible-xs-inline {}
.visible-xs-inline-block {}


/* XS 屏幕下隐藏 */

.hidden-xs {}

详细链接

注意: bootstrap4 对此有重构, 命名有变化 . 这里仅对 bootstrap3 说明.

实战演示

• 沙拉社区首页
  • 链接

CSS 开发规范

• 页面化
  • 每个页面依 xx-page 为 CSS 前缀
  • 使用 SCSS 嵌套语法进行内部组件开发
    • 但嵌套不要超过3层
• 组件化
  • 如果二个以上页面都可能使用到某个相同的CSS样式, 则需要组件化
  • 放入 components/ 目录, 为组件给一个通用的名字
  • 组件本身应当与外界隔离, 使用 SCSS 嵌套语法

CSS 开发规范(2)

• 定制 bootstrap 样式
  • 优先使用 variables.scss 进行变量调整
  • 可以定义项目内的全局变量与函数
  • 学会充分利用与裁剪 bootstrap 组件

实际案例分析

• Salad UI Fix
• Event Mange PR

自由交流时间

谢谢

80% team