uni-app中的样式

uni-app中的样式

1.uni-app屏幕宽度自适应的动态单位rpx

  rpx 即响应式px，一种根据屏幕宽度自适应的动态单位
  rpx 官方建议：开发微信小程序时，设计师可以用 iPhone6 375 667作为视觉稿的标准

iphone5  320 568    320/750=0.42px
ipone6 375  667  375/750 = 0.5px
ipone6plus 414 736  414/750= 0.552px

  实现等比例放大缩小的原理，就是划分750等分，每一份就是rpx，把物体宽高都换成rpx单位，因rpx具体值是随着屏幕宽度而变化，所以物体也会随着而屏幕宽度而变化

  问题引入：在 375 * 667作为视觉稿上有个宽100px，高80px的盒子，需要做自适应，怎么解决？？
  解决方法：使用rpx，代码如下

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

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box {
		font-size: 40rpx;
		width: 200rpx;
		height: 160rpx;
		background-color: pink;
	}
</style>

2.uni-app .vue文件导入样式

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

<template>
	<view>
		 <view class="box box-font">
			 你好
		 </view>  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url("detail.css");
	.box {
		font-size: 40rpx;
		width: 200rpx;
		height: 160rpx;
		background-color: pink;
	}
</style>

  2).使用 import 导入

<template>
	<view>
		 <view class="box box-font">
			 你好
		 </view>  
	</view>
</template>

<script>
	import './detail.css'
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box {
		font-size: 40rpx;
		width: 200rpx;
		height: 160rpx;
		background-color: pink;
	}
</style>

  效果如下：

4.uni-app 样式注意点

  + rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

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

  + 支持基本常用的选择器class、id、element等

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

  + page 相当于 body 节点 （小程序page）

5.uni-app 全局样式和局部样式

  定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
  全局样式：

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	.box {
		background-color: blue;
	}
</style>

  局部样式：

<template>
	<view>
		 <view class="box box-font">
			 你好
		 </view>  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	@import url("detail.css");
	.box {
		font-size: 40rpx;
		width: 200rpx;
		height: 160rpx;
/* 		background-color: pink; */
	}
</style>

  效果如下，如果把css.vue .box样式里面的background-color 放开，即可覆盖全局背景蓝色，变为粉红色

6.uni-app使用字体图标

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

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

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

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

<template>
	<view>
		<view class="iconfont icon-shipin">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

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

  代码目录结构：

  效果如下：

7.uni-app使用scss或者less

  uni-app 要想使用scss,less先要在开发工具里面安装插件，安装完成后，如下代码是不会变异报错的：

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

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.box {
		width: 200px;
		height: 200px;
		background-color: pink;
		.box-sub {
			width: 100px;
			height: 100px;
			background-color: $global-color;
		}
	}
</style>

  效果如下：