rpx转px
时间:2019-10-31
本文章向大家介绍rpx转px,主要包括rpx转px使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
什么是rpx?
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
为什么需要rpx?
设计师在提供设计图时,一般只提供一个分辨率的图。
严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。
而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。
rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app
规定屏幕基准宽度 750rpx。
rpx如何换算成px?
开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式(其他小程序也适用)1rpx 转换公式如下:
参考资料
https://uniapp.dcloud.io/frame?id=%e5%b0%ba%e5%af%b8%e5%8d%95%e4%bd%8d
https://www.jianshu.com/p/f922a73b6dd6
原文地址:https://www.cnblogs.com/sauronblog/p/11771785.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计模式 之 工厂模式
- C# GTS四轴运动控制器实例(固高科技步进电机不带编码器) -V1
- C# 修改配置文件进行窗体logo切换
- 物理备库的Switchover
- 使用Python自动备份思科交换机配置
- c# winform 窗体最大化后挡住了任务栏
- Oracle参数解析(timed_statistics)
- C#将引用的dll嵌入到exe文件中
- C# 软件版本号
- C# 实现登录并跳转界面
- QT 常用控件操作实例集锦
- C# Socket TCP发送图片与接收图片
- ingress通过daemonSet,nodeSelector,hostNetwork方式部署
- Oracle参数解析(event)
- Qt读写文件(2种方式)实现详解