响应式体验可跨设备顺畅缩放页面，从而在不同尺寸的屏幕上更好地显示内容。 借助响应式设计，也无需为了支持不同设备而生成多个版本的网站页面。
在 SharePoint 创作环境中设计响应式页面时，需要用到以 Office UI Fabric 为依据的响应式网格系统。 本文介绍了基础页面网格系统和需要切换页面布局的断点或重要屏幕尺寸。
页面类型网格
在 SharePoint 创作体验中，对于如何应用 Fabric 响应式网格，每种类型页面都有自己的一套规则。 这是为了确保每个页面都可以呈现完美外观（无论页面是专为哪种设备而设计），并确保用户体验与环境更加贴合。 SharePoint 桌面体验中的基本网格是 12 列结构。 列数和间距宽度根据屏幕宽度进行调整。
下面各部分介绍了跨不同类型 SharePoint 页面应用的基本网格结构，有助于读者更好地理解网格为支持提供用户体验和满足不同设备需求的具体调整方式。
团队网站
团队网站的内容区域固定在左侧。 团队网站包含左侧导航，因此 Web 部件占据的网格空间和重排行为都需要考虑到导航占据的空间。 团队网站内容区域的最大宽度为 1204 像素，最小宽度为 320 像素（旨在支持移动设备）。
下面各示例展示了团队网站上关键断点处的网格切换。
小型 320x568
小型网格包含一个居中的列区域，左右各有 20 像素边距。
中型 480x854
中型网格包含 12 列，列间距为 16 像素。
大型 640x1024
大型网格包含 12 列，列间距为 24 像素。
超大型 1024x768
超大型网格包含 12 列，列间距为 24 像素。
特大型 1366x768
特大型网格包含 12 列，列间距为 32 像素。
超特大型 1920x1080
超特大型网格包含 12 列，列间距为 32 像素。
团队网站的多列页面和 Web 部件
Web 部件会根据页面布局水平缩放。 下面的示例展示了 Web 部件如何调整尺寸来适应左侧导航。
通信网站
通信网站包含顶部导航和居中的内容区域。 通信网站内容区域的最大宽度为 1204 像素，最小宽度为 320 像素（旨在支持移动设备）。
下面各示例展示了通信网站上关键断点处的网格切换。
小型 320x568
小型网格包含一个居中的列区域，左右各有 20 像素边距。
中型 480x854
中型网格包含 12 列，列间距为 16 像素。
大型 640x1024
大型网格包含 12 列，列间距为 24 像素。
超大型 1024x768
超大型网格包含 12 列，列间距为 24 像素。
特大型 1366x768
特大型网格包含 12 列，列间距为 32 像素。
超特大型 1920x1080
超特大型网格包含 12 列，列间距为 32 像素。
通信网站的多列页面和 Web 部件
Web 部件会根据页面布局水平缩放。 本例展示了采用一到三列布局的通信网站和 Web 部件。
断点
为了提供流畅的屏幕尺寸过渡体验，SharePoint UI 应采用以下断点宽度布局：
- 320 像素
- 1024 像素
- 1366 像素
- 1920 像素
在这些断点内，应考虑如何在视区尺寸更接近最近断点时切换内容。 请注意，下面仅为示意图，像素值并不准确。
从大型断点转到移动断点时，团队网站和通信网站的响应式网格都会进行调整。 这样一来，网站就更适合在相应尺寸的设备和屏幕上展示。 下表根据常见设备尺寸列出了各种断点处的网格尺寸。
| 窗口宽度 | 设备 | 断点 | 列数 | 间距 | 每部分的最大列数 |
|---|---|---|---|---|---|
| 320 | iPhone 5/SE (320x568) | 小型 | 1 | 无 | 1 |
| 480 | 6 英寸设备 | 中型 | 1 | 无 | 1 |
| 640 | 8 英寸设备 | 大型 | 12 | 16 | 2 |
| 768 | iPad 纵向 768x1024 | 大型 | 12 | 24 | 2 |
| 1024 | iPad 横向 1024x768 | 超大型 | 12 | 24 | 3 |
| 1368 | Surface Pro 3 1368x912 | 特大型 | 12 | 32 | 3 |
| 1440 | Surface Pro 4 1440x960 | 特大型 | 12 | 32 | 3 |
| 1600 | Web 1600x900 | 特大型 | 12 | 32 | 3 |
| 1920 | Web 1920x1080 | 超特大型 | 12 | 32 | 3 |