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

初尝微信小程序3-移动设备的分辨率与rpx

时间:2018-07-07 22:21:41      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:alt   布局   0x13   技术   大小   使用   text   分享图片   而在   

技术分享图片

屏幕尺寸就是实际的物理尺寸。

分辨率(pt),是逻辑分辨率,pt的大小只和屏幕尺寸有关,简单可以理解为长度和视觉单位。

分辨率(px),是物理分辨率,单位是像素点,和屏幕尺寸没有关系。

微信开发者工具上iphone6尺寸是375,指的是逻辑分辨率,设计图常常给出的750px是物理分辨率。1个pt可以有1个px构成,也可以是2个,还可以有3个甚至更多(其实@2x已经是人眼的极限了,再增加也不会改变清晰度)。如果是以iphone6的尺寸开发的话,那么设计图给的物理像素除以2,才是写在代码里的逻辑分辨率。这样很麻烦,针对不同的机型,添加图片需要更改各自的宽高。

 

所以需要做到不同分辨率设备的自适应

 

以iphone6的物理像素750X1334为视觉稿进行设计,而在小程序中使用rpx为单位,1px=1rpx=0.5pt。使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会。

rpx在微信小程序中,相当于一个标准,在不同的分辨率机型下,代表不同的实际长度。

所以今后在设计页面布局图的时候,尽量以iphone6,750px屏幕尺寸为标准设计,这样比较方便,不会有太大问题。(如果以iPhone6 plus为标准设计的话,1px = 0.6rpx,换算很麻烦,而iPhone6 1px=1rpx,很方便,1:1)。

 

PS:不是所有的单位都适合用rpx

比如一些文字,如果用rpx自适应,那可能在小机型上,字会很小看不清。

初尝微信小程序3-移动设备的分辨率与rpx

标签:alt   布局   0x13   技术   大小   使用   text   分享图片   而在   

原文地址:https://www.cnblogs.com/lvmingchen/p/9278328.html

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