uni-app的样式和sass

以下代码都是在 vscode中进行编辑

样式

rpx

	rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

小例子（./pages/index.vue)

<template>
<view class="content">
	<view class="rpx">rpx</view>
</view>
</template>

<script>
	 
</script>

<style>
	 .rpx{
		 /* rpx 小程序中的单位 750rpx =屏幕的宽度 */
		 width:750rpx;
		 height: 100rpx;
		 background-color: aqua;
	 }
</style>

保存查看结果

vw

vw h5单位 100vw = 屏幕宽度 100vh=屏幕高度

小例子（./pages/index.vue)

 <template>
<view class="content">
	<view class="rpx">rpx</view>
	<view class="vw">vw</view>
</view>
</template>

<script>
	 
</script>

<style>
	.rpx{
		 /* rpx 小程序中的单位 750rpx =屏幕的宽度 */
		 width:750rpx;
		 height: 100rpx;
		 background-color: aqua;
	}
    .vw{
		/* vw h5单位 100vw = 屏幕宽度 100vh=屏幕高度 */
		width:50vw;
		height:100px;
		background-color: chocolate;
	}
</style>

查看运行结果

sass

Sass官方文档
下载sass依赖
1.Ctrl+C中止项目进程

2.使用cnpm下载sass依赖

 cnpm install sass-loader node-sass

3.重启项目

 cnpm run dev:mp-weixin

小例子（./pages/index.vue)

 <template>
<view class="content">
	<view class="rpx">rpx</view>
	<view class="vw">vw</view>
	<view class="sass">sass</view>
</view>
</template>

<script>
	 
</script>

<style lang="scss">
	.rpx{
		 /* rpx 小程序中的单位 750rpx =屏幕的宽度 */
		 width:750rpx;
		 height: 100rpx;
		 background-color: aqua;
	}
    .vw{
		/* vw h5单位 100vw = 屏幕宽度 100vh=屏幕高度 */
		width:50vw;
		height:100px;
		background-color: chocolate;
	}

	.content{
		.sass{
			
			background-color: red;
		}
	}
</style>

重点：在style标签中要添加属性<style lang="scss">