位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 2.4.1 尺寸单位
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.4 页面样式与布局 下一篇: 2.4.2 样式导入

2.4.1 尺寸单位

uni-app 支持的通用 css 单位包括 pxrpx

n  px 即屏幕像素

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

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

n  rem 默认根字体大小为 屏幕宽度/20(微信小程序、头条小程序、AppH5

n  vh=viewpoint height,视窗高度,1vh等于视窗高度的1%

n  vw=viewpoint width,视窗宽度,1vw等于视窗宽度的1%

nvue还不支持百分比单位。

App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px注意此时不支持 rpx

nvue中,uni-app 模式可以使用 px rpx,表现与 vue 中一致。weex 模式目前遵循weex的单位,它的单位比较特殊:

n  px:,以750宽的屏幕为基准动态计算的长度单位,与 vue 页面中的 rpx 理念相同。(一定要注意 weex 模式的 px,和 vue 里的 px 逻辑不一样。)

n  wx:与设备屏幕宽度无关的长度单位,与 vue 页面中的 px 理念相同

rpx 详细说明

设计师在提供设计图时,一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题,uni-app App 端、H5 端都支持了 rpx

rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx

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

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之,页面元素宽度在 uni-app 中的宽度计算公式:

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

举例说明

n  若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx

n  若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx

n  若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx

提示

n  注意 rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。

n  如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px

n  rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向

n  设计师可以用 iPhone6 作为视觉稿的标准。

n  如果设计稿不是750pxHBuilderX提供了自动换算的工具

n  App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx

n  早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx


【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com


上一篇: 2.4 页面样式与布局 下一篇: 2.4.2 样式导入
毕业设计网             广告联系QQ:45157718(微信同号)