温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

uni-app中样式是怎么样的

发布时间:2021-11-17 11:07:12 来源:亿速云 阅读:135 作者:小新 栏目:开发技术

小编给大家分享一下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>

看完了这篇文章,相信你对“uni-app中样式是怎么样的”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

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

AI