uni-appcss语法

锋哥原创的uni-app视频教程：

2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1eG411N71c/uni-app 的 css 与 web 的 css 基本一致。

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

• px 即屏幕像素

• rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

​

​

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

common目录下新建test.css

.c3{
    margin-top: 10px;
    background-color: blue;
    width: 100rpx;
    height: 100rpx;
}

my.vue页面修改

加入 @import url("../common/test.css");

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅 vue 页面生效
::before	view::before	在 view 组件前边插入内容，仅 vue 页面生效

注意：

• 在 uni-app 中不能使用 * 选择器。

• 微信小程序自定义组件中仅支持 class 选择器

• page 相当于 body 节点，例如：

  
      
          
      
      
          
              
          
          状态栏下的文字
      
  
  

  示例 2 - nvue 页面获取状态栏高度

  
  ​
  

  固定值

  uni-app 中以下组件的高度是固定的，不可修改：

  组件	描述	App	H5
  NavigationBar	导航栏	44px	44px
  TabBar	底部选项卡	HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度）	50px

  各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

  Flex布局

  为支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的 flex 教程等。

  背景图片

  uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

  • 支持 base64 格式图片。

  • 支持网络路径图片。

  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。

  • 使用本地路径背景图片需注意：

    1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；

    2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。

    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

    .test2 {
        background-image: url('~@/static/logo.png');
    }

  注意

  • 微信小程序不支持相对路径（真机不支持，开发工具支持）

  字体图标

  uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 支持 base64 格式字体图标。

  • 支持网络路径字体图标。

  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。

  • 网络路径必须加协议头 https。

  • 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。

  • 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。

  • 使用本地路径图标字体需注意：

    1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；

    2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

    @font-face {
        font-family: test1-icon;
        src: url('~@/static/iconfont.ttf');
    }

  nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

  var domModule = weex.requireModule('dom');
  domModule.addRule('fontFace', {
      fontFamily: 'fontFamilyName',
      src: "url('https://...')",
  });

  示例：