小程序开发-第一章第五节从px到rpx-全栈工程师之路-中级篇

简介: 小程序开发-第一章第五节从px到rpx-全栈工程师之路-中级篇

这一小节作为第一章的最后一节,其实关于单位的文章,在博客上倒是挺多的。

我一直在想,我是不是有必要再写这一节,还是给大家提供一些阅读链接。

因为关于单位的定义都是比较官方的。没什么好讨论的,我这里做一个汇总和简单的说明吧。


首先本文只以移动设备为例说明。

本文摘要:设计师以iphone6为标准出设计稿的话,1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所以可以直接使用标注尺寸数据。

-------------------------看懂本文摘要的话,就不用阅读下面的内容了-----------------

【英寸Inch】英寸表示屏幕斜对角线的长度。如下图所示:

image.png

【像素Pixel】像素是图像的基本采样单位,它不是一个确定的物理量,因为像素点的物理大小是不确定的。如图:

image.png

【分辨率】分辨率是屏幕像素的数量,一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334.

分辨率又分为【物理分辨率】和【逻辑分辨率】,值得注意的是实际工作中设计师常常给的是物理分辨率,程序中用到的是逻辑分辨率,但是都称为分辨率,容易混淆。


【物理分辨率】是硬件所支持的分辨率,【逻辑分辨率】是软件可以达到的分辨率。

物理分辨率和逻辑分辨率的商称为【像素倍率dpr】,也就是常说的几倍屏。

如下图中所示,iphone6的分辨率写着375*667,这里指的就是它的逻辑分辨率。我们上面提的750*1334则是它的物理分辨率。

所以iphone6的像素倍率=(750*1334)/(375*667)=2

image.png

理解了上述的几个概念,我们就可以接着来看下面的几个单位。


【px】px就是Pixel的缩写,就是指像素。这个作为图片采样的基本单位,没什么需要特别说明的。


【rem】在做移动端适配是最常用的方法就是使用rem作为单位,因为rem是根据html的fontsize去动态计算实际的px的。

所以常常应用这点,做反向使用。即根据屏幕大小动态的设置fontsize.来达到不同的分辨率下有一样的效果。


【rpx】rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案,官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。

所以在微信小程序中1rem=750/20rpx。

但是这不是我们要关注的重点。


在使用rem时,我们常常让设计师根据iphone6的标准出设计稿。因为如果以iphone6为标准,并且在iphone6上将fontsize设置成62.5%。

那么1rem就等于10px,我们只要将设计师标注的尺寸(一般标注的是物理分辨率)除以20就可以得到单位为rem的数值了。


在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
css中的px与设备的物理像素并非绝对的一比一关系。

px与物理像素的比例与设备的dpr(像素倍率)有关。

rpx称为相对像素值,rpx与物理像素也并非绝对的一比一关系。


wxss将设备宽定义为750rpx,是以iPhone6的分辨率(750x1334)为基准划分的。

也就是说,在iPhone6上,1rpx=1物理像素=0.5px。

因为设计师标注的尺寸一般是物理分辨率。所以如果以iphone6为标准出设计稿的话,那么我们就可以不需要经过换算直接标准rpx。

这节课的内容就到这里结束了。

感谢您的阅读。



目录
相关文章
|
2月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
小程序 JavaScript
微信小程序:px与rpx之间转化
微信小程序:px与rpx之间转化
微信小程序:px与rpx之间转化
|
9月前
|
小程序
微信小程序-新增RPX响应式单位
!> 在企业开发中,拿到设计师设计的750设计图之后,我们只需要将模拟器调整为 iphone6,然后将设计图上标注的 px 乘以2,写到样式中,单位使用 rpx 即可。
51 0
|
9月前
|
小程序 前端开发 JavaScript
微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对
微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对
636 0
|
编解码 小程序 前端开发
【微信小程序】小程序支持的css选择器、小程序自适应单位rpx简介
在小程序里,长度单位既可以使用rpx,也可以使用px,使用rpx可以使组件自适应屏幕的高度和宽度,但是使用px不会。
229 0
|
小程序 前端开发
【小程序】wxss与rpx单位以及全局样式和局部样式
【小程序】wxss与rpx单位以及全局样式和局部样式
202 0
【小程序】wxss与rpx单位以及全局样式和局部样式
|
11天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
21天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
21天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
21天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。