码迷,mamicode.com
首页 > 微信 > 详细

【小程序】使用uni-app搭建小程序环境---尺寸单位

时间:2020-04-17 20:00:14      阅读:386      评论:0      收藏:0      [点我收藏+]

标签:phone   通过   计算   width   data-   iphone6   举例   详细   应该   

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

  • px 即屏幕像素
  • rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。

 

vue页面支持普通H5单位,但在nvue里不支持:

  • rem 默认根字体大小为 屏幕宽度/20(微信小程序、头条小程序、App、H5)
  • vh viewpoint height,视窗高度,1vh等于视窗高度的1%
  • vw viewpoint width,视窗宽度,1vw等于视窗宽度的1%

 

rpx 详细说明:

  • 微信小程序设计了 rpx 解决这个问题,uni-app 在 App 端、H5 端都支持了 rpx
  • rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。
  • uni-app 规定屏幕基准宽度 750rpx。
  • 开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下: 
    设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 

    换言之,页面元素宽度在 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 了,详见

【小程序】使用uni-app搭建小程序环境---尺寸单位

标签:phone   通过   计算   width   data-   iphone6   举例   详细   应该   

原文地址:https://www.cnblogs.com/websmile/p/11588842.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!