屏幕大小和断点

  • 项目

Windows应用可以在运行Windows的任何设备上运行，其中包括平板电脑、桌面、电视等。 对于Windows生态系统中的大量设备目标和屏幕大小，而不是为每个设备优化 UI，我们建议针对几个关键宽度类别进行设计， (也称为“断点”) ：

  • 小（640px 以下）
  • 中等（641px 到 1007px）
  • 大（不小于 1008px）

提示

在针对特定断点进行设计时，请针对应用（应用的窗口）的屏幕可用空间大小（而不是屏幕大小）进行设计。 当应用全屏运行时，应用窗口的大小与屏幕的大小相同，但当应用不全屏运行时，窗口的大小小于屏幕的大小。

断点

下表展示了不同的大小级别和断点。

Responsive design breakpoints

大小级别 断点 典型屏幕大小 设备 窗口大小
小型 高达 640px 20“ 到 65” 电视 320x569、360x640、480x854
中 641 - 1007px 7" 到 12" 平板电脑 960x540
大 1008ps 及更高 13" 及更大 电脑、笔记本电脑、Surface Hub 1024x640、1366x768、1920x1080

为什么将电视归入“小”类别？

虽然大多数电视体积相当大（一般为 40 到 65 英寸）并且具有高分辨率（HD 或 4k），但在 10 英尺远处观看的 1080P 电视采取的设计与坐在 1 英尺远的桌前使用的 1080p 显示器是不同的。 考虑到距离，1080 像素电视的观看效果相当于 540 像素的显示器。

XAML 的有效像素系统会自动为你考虑查看距离。 当你为控件或断点范围指定大小时，实际上使用的是“有效”像素。 例如，为 1080 像素或更高像素创建响应代码时，1080 像素显示器将使用该代码，但 1080p 电视不会 - 因为虽然 1080p 电视具有 1080 个物理像素，但它的有效像素数只有 540 个。 这使得电视的设计类似于为小屏幕进行设计。

有效像素和缩放比例

XAML 有助于自动调整 UI 元素，使其易于在所有设备和屏幕大小上与它们交互。

当你的应用在设备上运行时，系统将使用算法来使 UI 元素在屏幕上的显示方式规范化。 此缩放算法考虑了观看距离和屏幕密度（每英寸像素），以针对感知大小（而不是物理大小）进行优化。 该缩放算法确保用户可从 10 英尺远处识别 Surface Hub 上高 24 像素的字体，正如从几英寸远处识别 5 英寸手机上高 24 像素的字体。

Content is scaled differently on different devices based on how far away the user is expected to be from the device's screen

由于缩放系统的工作原理，在设计 XAML 应用时，需要以有效像素而不是实际物理像素进行设计。 有效像素 (epx) 是一个虚拟度量单位，用于表示布局尺寸和间距（独立于屏幕密度）。 （在我们的指南中，epx、ep 和 px 可以互换使用。）

在设计时，你可以忽略像素密度和实际屏幕分辨率。 而是针对同一大小级别的有效分辨率（以有效像素为单位的分辨率）进行设计（有关详细信息，请参阅 屏幕大小和断点文章）。

提示

在使用图像编辑程序创建屏幕原型时，将 DPI 设置为 72，并将图像尺寸设置为目标大小级别的有效分辨率。

四的倍数

A 4 epx image being scaled to many dimensions without fractional pixels.

在 UWP 应用中，UI 元素的大小、边距和位置应始终为 4 epx 的倍数。

XAML 跨一系列设备缩放，缩放高原为 100%、125%、150%、175%、200%、225%、250%、300%和 400%。 基础单位是 4，因为它可以整数形式缩放到这些比例（例如 4 x 125% = 5，4 x 150% = 6）。 使用 4 的倍数可以将所有 UI 元素与整个像素匹配，并可确保 UI 元素具有清晰的锐边。 （请注意，文本不会有此要求；文本的大小和位置可以是任意值。）