布局与样式

本教程介绍 BlueOS 的尺寸单位、flex 布局和 Tailwind utilities。完成后，可以构建一个适合手表屏幕的居中页面，并识别平台不支持的常见 CSS 属性。

前提条件

• 已完成页面结构与应用配置。
• 已在 BlueOS Studio 中创建可正常预览的工程。

确认尺寸基准

样式尺寸按照设计基准宽度缩放。样式参考文档默认使用 750px，新建手表应用的 manifest.json 建议将 config.designWidth 设为 466。工程中的设计稿尺寸和 designWidth 必须保持一致。

BlueOS 样式支持 px 和 %，不支持 rem、em、vw 和 vh。完整规则参见样式参考。

使用 flex 构建页面

display 仅支持 flex 和 none，不支持 block、inline-block 和 grid。手表页面通常使用纵向 flex 布局。

1. 打开首页的 index.ux。
2. 将页面内容替换为以下代码：

<script>
  export default {
    data: {},
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full">
    <text class="text-white text-3xl">标题</text>
    <text class="text-white mt-10">副标题</text>
  </div>
</template>

<style>
@tailwind utilities;
</style>

3. 保存文件。
4. 查看模拟器中的页面。

页面应显示纵向排列且水平居中的标题和副标题。元素间距通过子元素的 margin 实现，例如 mt-10。BlueOS 不支持 gap-* 和 :last-child。

使用 Tailwind utilities

优先使用 Tailwind utilities，并在 <style> 中保留 @tailwind utilities;。构建工具会清除未使用的类。仅在 utilities 无法安全表达规则时编写 CSS，例如某些圆角效果需要同时设置 border-width。

需要纵向滚动的页面不得使用 h-full 或 height: 100% 固定根节点高度。仅显示一屏内容的居中页面可以使用 h-full。

排查不支持的样式

不支持的写法	原因或替代方案
gap	不支持；改用子元素的 margin
grid / block	display 仅支持 flex 和 none
CSS 变量 var(--x)	不支持解析；改用固定属性值
:hover / :nth-child	不支持；平台仅支持少量伪类，例如 :active
position: sticky	不支持；list、swiper 和 scroll 中的定位属性也不生效
z-index	不支持；节点按照模板中的先后顺序叠放

完整的支持范围参见通用样式。

后续步骤

继续完成数据、列表与事件，为页面添加响应式数据、列表和点击交互。