uniApp：组件样式

• 支持基本常用的选择器 class、id、element 等，但不能使用 * 选择器。
• page 相当于 body 节点。
• 在 pages 目录下的 vue 文件中定义的样式为局部样式，会覆盖 App.vue 中的全局样式。

rpx 响应式

• rpx 响应式 px，根据屏幕宽度自适应的动态单位。

  750rpx = 375px，1:2比例。

  <template>
  	<view>
  		<view class="box">测试文字</view>
  	</view>
  </template>
  
  <style>
  	.box {
  		width: 750rpx;
  		height: 750rpx;
  		background: #0000FF;
  		font-size: 30rpx;
  	}
  </style>
  

@import 外联式

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

  <template>
  	<view>
  		<view class="box">测试文字</view>
  	</view>
  </template>
  
  <style>
  	@import url("./a.css");
  </style>
  

字体图标

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

  • 字体文件小于 40kb，uni-app 会自动将其转化为 basse64 格式。

  • 字体文件大于 40kb，需要开发者自己转换，否则使用将不生效。

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

    

1. 字体图标文件 iconfont.css 。

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

2. 在 App.vue 文件全局引入。

   <style>
   	@import url("./static/fonts/iconfont.css");
   </style>
   

3. 在子页面 uni-style.vue 中使用。

   使用字体图标时，一定要加上 iconfont 类名。

   <template>
   	<view class="iconfont icon-bangdan">这是榜单字体图标</view>
   </template>
   

scss 插件

scss 和 less 具有一样的效果。

<template>
	<view class="box">
        测试文字
        <text>scss测试</text>
    </view>
</template>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 750rpx;
		background: #000000;
		color: #FFFFFF;
		text {
			color: #0000FF;
		}
	}
</style>