rpx单位

作者: web前端_潘哥哥 | 来源:发表于2021-04-11 19:15 被阅读0次

面元素宽度在 uni-app 中的宽度计算公式:

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
  2. 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
  3. 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

Tips

  • 注意 rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。
  • 如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。
  • rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向
  • 设计师可以用 iPhone6 作为视觉稿的标准。
  • 如果设计稿不是750px,HBuilderX提供了自动换算的工具,详见:https://ask.dcloud.net.cn/article/35445
  • App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。
  • 早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了,详见

相关文章

  • rpx单位

    面元素宽度在 uni-app 中的宽度计算公式: 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 举例说明:...

  • 微信小程序笔记

    单位 rpx rpx类似于 Android 中dp,具有设备独立性,最大屏幕宽度为750rpx。 字体加粗 单位 ...

  • 小程序之WXSS

    WXSS和CSS区别有以下几个方面: 尺寸单位rpx 样式导入 内联样式 选择器 尺寸单位rpx rpx和rem相...

  • 微信小程序尺寸单位rpx以及样式

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 ...

  • 字体单位rpx

    看一下别人写的 博客原来:字体大小=750*设计稿元素的宽度/设计稿的宽度即:多少px就等于多少rpx;但在uni...

  • px 与rpx 的转换

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iP...

  • 前端总结

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 微信小程序中尺寸单位rpx及样式的用法

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 一、rpx

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

  • 微信小程序之单位rpx(八)

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPh...

网友评论

      本文标题:rpx单位

      本文链接:https://www.haomeiwen.com/subject/uqczkltx.html