iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解uni-app中的样式
  • 206
分享到

详解uni-app中的样式

2024-04-02 19:04:59 206人浏览 安东尼
摘要

目录uni-app中的样式总结uni-app中的样式 sass插件需要在官网下载,按提示操作即可 rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽

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>
	
	//全局样式,会被局部样式覆盖掉
	@import url("./static/fonts/iconfont.css");
	.box1{
		background: pink;
	}
</style>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 详解uni-app中的样式

本文链接: https://www.lsjlt.com/news/157522.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作