uni-app中的rpx

Tips:

uni-app支持的通用css单位包括px,rpx
px即屏幕像素
rpx 即响应式 px，是一种根据屏幕宽度自适应的动态单位。
rpx 以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度 (即 375rpx) 为屏幕一半的宽度);当屏幕变宽时，rpx 实际显示效果也会等比例放大

rpx和px的区分和转换：

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx换言之，页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度举例说明：- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 *100 / 750，结果为：100rpx。- 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 *100 / 640，结果为：117rpx。- 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 *200 / 375，结果为：400rpx。

注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用px
rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
设计师可以用 iPhone6 作为视觉稿的标准

导入css样式：

使用 @import 语句导入外联样式表
@import url("./test.css");
支持基本的常用选择器 class,id,element 等
不能使用*选择器
page 相当于 body 节点
定义在 App.vue 中的样式为全局样式；定义在 pages 目录下的为局部样式，同时会覆盖样式相同的全局样式
在使用字体图标时：
1.当字体文件小于 40kb 时，会自动转换为 base64 格式
2.当字体文件大于等于 40lb 时，需要开发者自行转换，否则将不生效
3.字体文件的引用路径推荐使用以~@开头的绝对路径，如下：

注意：字体文件位于 static/fonts 下的 iconfont.css

@font-face {font-family: test-icon;src: url('~@/static/iconfont.ttf');
}

使用scss编译工具

安装scss插件
使用scss编译工具
<style lang="scss">
在uni.scss中定义全局样式：

uni.scss是uni-app内置的常用样式变量
uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件

uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
Vue实现app中搜索页面的炫酷搜索热词布局样式
首先是效果图可以自适应屏幕大小可以每次刷新改变热词底色在电脑显示如下下面是实现过程数据准备:原始数据为["**********"] 布局: 其中hotWords是上面的数 ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
app中的webview是什么？如何理解？
app中的webview是什么?如何理解? 当你上网阅读东西时,我们一般会选择一款浏览器,比如Chrome.火狐.safari.IE或者Edge.你可能不知道这些浏览器之间有一些竞争,而竞争的主要形式 ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
如何创建 Ping app 中的 UIViewController 转换动画？
原文:How To Make A UIViewController Transition Animation Like in the Ping App 作者:Luke Parham 译者:kmyhy ...

uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入

uni-app中的rpx

使用scss编译工具

uni-app中理解，区分，使用rpx单位和px单位及样式字体的导入相关推荐

最新文章

热门文章