4、css语法
1、尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx。
px 即屏幕像素。
rpx 即响应式 px,一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准,750rpx 恰好为屏幕宽度。
750rpx刚好是一个屏幕宽度。
.box1{
width: 750rpx;
height:750rpx;
background:#40CEFF;
}
2、样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
创建单独css文件:
view{
color: red;
}
引入:
3、全局样式与局部样式
定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。
4、字体图标
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
如:引入字体图标:
字体图标里面引入其它图标也要用~@开头。
~@相当于项目根路径。
在app组件引用。以便于全局使用图标(引入一个就行。因为在这一个里会引入其它图标):
使用:
<view class="iconfont icon-guanyuwomen">hello</view>
如果要使用scss需要下载对应扩展工具。工具->插件安装
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构