微信小程序(布局适配与物理逻辑像素)

本文介绍了微信小程序中的布局适配原理,包括屏幕尺寸、物理像素与UI设计的关系、逻辑像素(DIP)、屏幕像素密度(PPI)、设备像素比(DPR)、视网膜显示屏、viewport的概念,以及rpx、vw、vh的适配方式。重点讨论了逻辑像素与物理像素的区别,并指出在小程序中,工程师使用逻辑像素进行开发,设计师则基于物理像素设计。
摘要由CSDN通过智能技术生成

(1)屏幕尺寸

屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米

如何计算手机尺寸?
答:知道手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。还有个更简单的方法,只要用尺子量一下它的对角线是多少厘米,然后再换算成英寸就搞定了。

(2)物理像素–UI设计师像素

物理像素==屏幕分辨率/物理分辨率。
屏幕分辨率是屏幕像素的数量,一般用屏幕度的像素点以屏幕度的像素点,指的是设备屏幕实际拥有的像素点。
单位:px,即1px=1个像素点

(3)逻辑像素/设备独立像素DIP—WEB

逻辑像素/设备独立像素:也叫“设备独立像素”(Device Independent Pixel, DIP),可以理解为反映在CSS/JS代码里的像素点数。

(4)屏幕像素密度PPI

屏幕像素密度:每英寸屏幕所拥有的像素数,英文简称PPI(pixels per inch),单位dpi。
Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值