屏幕大小和断点

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

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

提示

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

断点

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

大小级别	断点	典型屏幕大小	设备	窗口大小
小型	高达 640px	20 英寸到 65 英寸	电视	320x569、360x640、480x854
中	641 - 1007px	7" 到 12"	平板电脑	960x540
大	1008px 及最高	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 像素的字体。

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

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

提示

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

四的倍数

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

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