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

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

分辨率(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自适应,那可能在小机型上,字会很小看不清。

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

时间: 2024-10-08 16:44:56

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

初尝微信小程序1-特点

微信小程序特点:1.不需要下载安装即可使用 2.用户用完即走,不用关心是否安装太多应用 3.应用将无处不在,随时可用 适合开发的小程序类型:1.简单的用完即走的应用 2.低频的应用 3.性能要求不高的应用 学习一定要多看微信官方文档,关注版本更新. 原文地址:https://www.cnblogs.com/lvmingchen/p/9270766.html

初尝微信小程序2-基本框架

基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑    描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的,而且名字也不能随意更改,这些是作用于APP全局的,而用户创建的一些目录,这些可以看做一个个页面,这些目录下面也包含上面所说的.wxml文件,.wxss文件,.js文件,.json文件.这些文件和目录的名字是可以随意取的.有的文件不是必须的,可以参考微信小程序官方文档.如下: 就近关系:对于一个样式

初尝微信小程序2-Swiper组件、导航栏标题配置

swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也可以是文本,以及其他组件,需要灵活应用. 基本的配置包括:是否显示面板指示点.指示点颜色,当前选中的指示点颜色.是否自动切换.自动切换时间间隔.是否垂直滚动等. 详情如下官方文档: 实例:编写新闻阅读列表 示意图: 按照第二篇随笔:初尝小程序2-基本框架,中的工程,进行添加内容. 工程目录结构为:

微信小程序尺寸单位rpx以及样式相关介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0 微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx =

微信小程序rpx单位

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0. 微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx =

微信小程序的尺寸单位rpx介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px     1px = 2.34pxiPhone6      1rpx = 0.5px 1px = 2rpxiPhon

微信小程序-学习总结

微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 设备               rpx换算成px(屏幕宽度/750)     px换算成rpx(750/屏幕宽度) iPhone5        1rpx = 0.42px                            1px = 2.34rpx iPhone6        1rpx = 0.5px                              1p

微信小程序中的单位

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规

微信小程序 | 模仿百思不得其姐

微信小程序 仿百思不得姐 设备 微信开发者工具 v1.02.1901230 扩展 修复了视频点击播放不流畅的问题 修复了视频的暂停够无法播放问题 优化了部分页面 接口 首页 http://api.budejie.com/api/api_open.php?a=list&c=data&type=1 type=1 : 全部 type=41 : 视频 type=10 : 图片 type=29 : 段子 type=31 : 声音 加载更多 : 添加两个字段 page : 页码 (加载下一页需要) m