屏幕大小和断点

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

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

提示

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

断点

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

Size 类	断点	典型屏幕大小	设备	窗口大小
小型	高达 640px	20“ 到 65”	TV	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%和 400%。 基础单位是 4，因为它可以整数形式缩放到这些比例（例如 4 x 125% = 5，4 x 150% = 6）。 使用 4 的倍数可以将所有 UI 元素与整个像素匹配，并可确保 UI 元素具有清晰的锐边。 （请注意，文本不会有此要求；文本的大小和位置可以是任意值。）