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

另请参阅

• 设计工具包和资产
• 设计卓越的 SharePoint 体验