如何详细学习uni-app的样式设计？

本文共计612个文字，预计阅读时间需要3分钟。

目录：uni-app中的样式总结

总结：uni-app中的样式

sass插件需要在官网下载，按提示操作即可。

rpx：响应式像素，即根据屏幕宽度自动调整的像素。

响应式设计：px：即时响应式，px单位根据屏幕宽度自动调整。

根基准：以750宽度的屏幕为基准，750rpx为屏幕宽度。

动态单位：一种根据屏幕宽度自适屏的动态单位。

目录

• 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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!