目录

• uni-app中的样式
• 总结

uni-app中的样式

• sass插件需要在官网下载，按提示操作即可
• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。
• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

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

• 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
  
• 字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
  
• 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

<template>
	<view>
		<view>
			样式学习
		</view>
		<view class="box1">
			测试文字
			<text>123</text>
		</view>
		<view class="iconfont icon-shipin">
		</view>
	</view>
</template>
<script>
</script>
<style lang="scss">
	@import url("./a.css");//导入了外部的css文件
	.box1{
		width: 350rpx; //rpx不仅可以给盒子使用还可以给文字使用
		height: 350rpx;
		background: red;
		font-size: 50rpx;
		color: #FFFFFF;
		text{
			color: pink;
		}
	}
</style>

在App.vue里面定义公共的全局样式

<style>
	/*每个页面公共css */
	//全局样式,会被局部样式覆盖掉
	@import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用Cocos制作一个射击游戏的过程及代码是什么

  这篇文章主要介绍了CocosCreator制作射击游戏，各个方面都讲的比较详细，希望同学们自己动手试一下

• JavaScript中的三种排序算法的实现代码是什么

  排序算法是笔试中经常出现的,提起排序算法就一定要提下算法复杂度和大O表示法,算法复杂度是指算法在编写成可执行程序后，运行时所需要的资源，资源包括时间资源和内存资源,这篇文章主要给大家介绍了关于如何利用JavaScript实现排序算法的相关资料,需要的朋友可以参考下

• vue怎样实现修改密码的功能？

  vue怎样实现修改密码的功能？在vue中，我们想要做可以修改密码的功能，可以通过两个字段联合校验来实现。下文有实现代码及详细的代码详解，感兴趣的朋友可以了解看看。

• JS中怎么用正则表达式的方法来筛选年月日

  在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法，对此有兴趣的朋友们可以学习下。

• Node.js事件循环包括哪些阶段，实际怎样应用

  本篇文章带大家深度理解Node中的事件循环，希望对大家有所帮助！