屏幕大小和断点
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 英尺外的大演示文稿屏幕上的 24 像素字体与用户一样清晰，就像在距离几英寸的小便携式屏幕上的 24 像素字体一样清晰。
由于缩放系统的工作原理，设计 XAML 应用时，需要以有效像素而不是实际物理像素进行设计。 有效像素 (epx) 是一个虚拟度量单位，用于表示布局尺寸和间距（独立于屏幕密度）。 （在我们的指南中，epx、ep 和 px 可以互换使用。）
设计时，可以忽略像素密度和实际屏幕分辨率。 而是针对大小类的有效分辨率（有效像素的分辨率）进行设计。
提示
在图像编辑程序中创建屏幕模拟时，将 DPI 设置为 72，并将图像尺寸设置为目标大小类的有效分辨率。
四的倍数
UI 元素的大小、边距和位置应始终位于 XAML 应用中 4 个 epx 的倍数中。
XAML 可跨一系列设备缩放，缩放高原为 100%、125%、150%、175%、200%、225%、250%、300%和 400%。 基础单位是 4，因为它可以整数形式缩放到这些比例（例如 4 x 125% = 5，4 x 150% = 6）。 使用 4 的倍数可以将所有 UI 元素与整个像素匹配，并可确保 UI 元素具有清晰的锐边。 （请注意，文本不会有此要求；文本的大小和位置可以是任意值。）
