页面样式设计

前言

uni-app 的 CSS 与 Web 的 CSS 基本一致。uni-app 包含两种页面类型：

• vue 页面：通过 webview 渲染。
• nvue 页面：在 app 端通过原生渲染，其样式限制更多。

本文重点介绍 vue 页面的样式注意事项。

一、尺寸单位

在 uni-app 中，我们常用的 CSS 单位包括 px 和 rpx。

1.1 px 单位

• px 为像素单位，表示固定尺寸，无论设备屏幕如何变化，所设定的像素值保持不变。

1.2 rpx 单位

• rpx（响应式 px） 是一种动态单位，能根据屏幕宽度自适应。以 750 宽的设计稿为基准，750rpx 恰好等于屏幕宽度。
• 当屏幕变宽时，1rpx 对应的实际像素数也会等比例增大，从而达到响应式布局效果。

下列图片直观展示了 rpx 单位的实际效果：

通过这些图片，你可以直观看出使用 rpx 时，不同屏幕宽度下布局和元素尺寸如何自动调整，确保页面风格的一致性。

二、样式导入

为了方便样式的统一管理和复用，我们可以使用 @import 语句导入外部样式表。

• 写法：

  @import "相对路径";
  

• 说明：

  • 在 @import 后跟随需要导入的外联样式表的相对路径。
  • 每条语句末尾必须以 ; 结束。

下图展示了使用 @import 导入样式的写法，编辑器中显示的效果也十分直观：

通过这种方式，可以将公共样式抽离到单独的文件中，方便在多个页面间复用和统一管理。

三、常见选择器

uni-app 支持的 CSS 选择器与传统 Web 类似，但由于目标平台的限制，支持的选择器种类和用法有所不同。

选择器	示例代码	说明
类选择器 (.class)	.intro	选中所有具有 class="intro" 的组件
ID 选择器 (#id)	#firstname	选中具有 id="firstname" 的组件
标签选择器 (element)	view	选中所有 view 组件（uni-app 中常用的基础组件）
组合选择器	view, checkbox	同时选中所有 view 组件和 checkbox 组件
伪元素选择器 ::after	view::after	在 view 组件后插入内容（仅在 vue 页面生效）
伪元素选择器 ::before	view::before	在 view 组件前插入内容（仅在 vue 页面生效）

注意事项

• 不支持通用选择器：在 uni-app 中不能使用 * 选择器。

• 微信小程序限制：自定义组件中仅支持类选择器。

• 特殊选择器 page：

  • page 选择器相当于 HTML 中的 body 标签，用于设置整个页面的样式。

  • 示例用法：

    /* 设置页面背景色，注意使用 scoped 时可能失效 */
    page {
      background-color: #ccc;
    }
    

四、全局样式与局部样式

uni-app 中样式分为全局样式和局部样式两种，它们的作用范围和覆盖规则有所不同。

4.1 全局样式

• 定义位置：通常定义在 App.vue 文件内 <style> 标签中的样式。
• 作用范围：这些样式会自动作用于项目中所有页面。
• 外联样式：你可以在 App.vue 中使用 @import 语句引入外部样式表，从而使这些样式全局生效。

下图展示了在 App.vue 中导入全局样式的写法：

4.2 局部样式

• 定义位置：在 pages 目录下各个 vue 文件内 <style> 标签中的样式。
• 作用范围：局部样式仅作用于当前页面，并且会覆盖全局样式中相同选择器的样式。
• nvue 页面注意：目前 nvue 页面不支持全局样式，因此样式需要在每个页面中单独定义。

这种区分方式既能保证全局风格的一致，又能满足单个页面的个性化需求。

五、使用 Sass

为了提高 CSS 的开发效率和可维护性，uni-app 支持 Sass（SCSS）预处理器，同时内置了 uni-scss 全局样式库，方便进行页面布局和样式调整。

5.1 安装 Sass 插件

在项目根目录下安装相应的 Sass 编译插件，确保项目支持 .scss 文件。 如下图所示，通过编辑器安装插件后，项目即可识别 Sass 语法：

5.2 使用 Sass 编写样式

在 Vue 文件中的 <style> 标签上添加 lang="scss" 属性，即可开始使用 Sass 编写样式。例如：

<style lang="scss">
  $primary-color: #42b983;

  .container {
    background-color: $primary-color;
    padding: 20px;
    border-radius: 5px;
  }
</style>

下图展示了在页面中使用 Sass 语法的效果：

通过 Sass，你不仅可以使用变量、嵌套规则，还能通过混入（mixin）、继承等高级特性，大大提高代码的复用性和可维护性。