通过

定义布局和视图 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

通过一致的和可预见的用户界面管理，你构建的 Windows 运行时应用可以在大量外形因素、显示尺寸以及视图状态之间提供流畅和谐的体验。当用户在手机、平板电脑或大型高清显示器上查看时，当他们将屏幕纵向翻转时，以及当他们调整应用大小时，你都希望应用具有良好的外观。如果你对用户选择的设备和视图进行计划，则你的 UI 可以优美地重新排列以满足用户需求。

全屏横向、全屏纵向和已调整大小的较窄宽度视图

指定使用 JavaScript 的 Windows 运行时应用的 UI 可解决两个主要问题：应用支持的视图及其要求的布局。你可以使用级联样式表 (CSS) 完成此工作。

CSS 通过基于标准的 CSS 来描述和管理用户界面，从而保持内容与显示（即，显示的内容和显示的方式）的独立性。这种独立性可以让你提供支持多个设备、外形因素、屏幕大小、用户设置以及视图状态的一致、可用和有趣的用户体验。

布局 布局是你的应用可适合它支持的视图的机制。可通过级联样式表 3 层 (CSS3) 布局模块来设计、组织和呈现应用内容，这些模块包括适合用户选择用来查看内容的方式的网格、多列、区域以及弹性框等。

融合了语义式缩放功能的应用可根据显示信息的粒度和质量来指定语义阈值，UI 可在网格布局和内联布局之间进行切换。

视图 视图是用户用来访问和操纵应用内容的方式。

  • 横向或纵向
  • 全屏或已调整大小
  • 可平移、可缩放、已缩放或已调整大小的 UI 界面
  • 特定 UI 元素，如搜索结果面板或文件夹结构

定义 Windows 运行时应用的布局和视图要求熟悉 HTML、JavaScript 和 CSS。

本部分内容

主题 描述

快速入门：定义应用布局

可以针对任何窗口大小或方向定义应用布局。

快速入门：设计适用于不同窗口大小的应用

设计在任何窗口大小下都外观良好且功能正常的应用时，你必须选择是否创建其他布局来补充默认的水平全屏布局。

快速入门：为应用创建多个窗口

通过允许用户查看单独窗口中的多个独立功能，可帮助他们提高效率。

选择布局

为了向 Windows 运行时应用的用户提供最灵活和适应性最强的用户界面，你首先需要确定最适合你的内容的布局模式，以及可使用内容的视图。本主题介绍级联样式表 Level 3 (CSS3) 布局功能，Windows 8 中的 Windows 应用商店应用支持此功能。

设置应用页面的布局

你可以使用此处所述的布局模式设置你的应用页面上 UI 元素的布局。使边距、页眉、边线宽度以及其他此类元素遵循一致的模式可以保持应用之间的统一性，并可帮助人们轻松了解系统间的交互。

 

相关主题

设置 UI 的布局

设置应用页面的布局