详解uni-app中的样式
16lz
2022-04-22
这篇文章主要为大家介绍了uni-app中的样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
目录
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>
更多相关文章
- android:随记
- ANDROID 使用 Service 在手机锁屏休眠状态下后台执行发送短信息
- Android(安卓)使用系统摄像头拍相片与拍视频,并显示
- 强制 Android(安卓)应用使用某个 Locale
- Android中MediaPlayer的setDataSource方法的使用
- Fragment的使用简介【Android】
- Android(安卓)onMeasure、Measure、measureChild、measureChildr
- Android中获取正在运行的服务-------ActivityManager.RunningSer
- 安卓线程三种简易使用