【uni-app从入门到实战】样式学习

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

css支持官方文档

rpx

uni-app 支持的通用 css 单位包括 px、rpx。rpx 之前没有用过，这里主要学习它， rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位

模拟机我们选择 iPhone6/7/8（设备宽高为375x667，可以理解为设备独立像素或css像素），dpr 为 2，即 1 个css像素相当于 2 个物理像素，所以物理像素就应该×2，为 750×1334

所以给 view 设置样式宽高为 750rpx 时会占满屏幕

<template>
	<view class="box">
	</view>
</template>

<script>
</script>

<style>
	.box {
		width: 750rpx;
		height: 750rpx;
		background: pink;
	}
</style>

给 view 设置样式宽高为 375rpx 时会占满屏幕一半

import

@import语句可以导入外联样式表

例如我们在 static 下新增一个 a.css

view{
	background: red;
}

在页面中引入

<style>
	@import url("@/static/a.css");
	.box {
		width: 750rpx;
		height: 750rpx;
	}
</style>

这样 view 的背景色就变成红色了

字体图标

字体图标官方文档

首先下载。我们先在 iconfont 搜索到所需图片，然后添加到购物车，然后点击右上角购物车，点击下载代码（浏览器如果缩放太大，可能只看到两个按钮哦，调整下缩放）

下载的 zip 文件解压后有如下文件：

复制 iconfont.css 和 iconfont.ttf 到项目的 static 目录下。由于字体文件的引用路径推荐使用以~@开头的绝对路径，所以我们修改 iconfont.css 中 iconfont.ttf 路径如下：

然后在 App.vue 中引入 iconfont.css

<style>
	/*每个页面公共css */
	@import url(static/iconfont.css);
</style>

然后在页面中使用

<view class="iconfont icon-charutupian"></view>

这样图片就显示出来了

scss使用

首先需要安装插件。HBuilder 菜单栏：工具——插件安装，找到 scss/sass 编译 插件进行安装

这样就可以使用 scss 了，uni.scss 中的变量我们可以直接使用

例如我们设置 view 背景颜色为 uni-color-success

运行程序，view 背景颜色即为变量颜色