微信小程序（布局适配与物理逻辑像素）
2024-06-04 11:40:57
前言
- 移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下
- 关键词：
- 屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。
屏幕尺寸
- 华为荣耀7
- 图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢？
- 先进行一下单位的换算1英寸（inch）=2.54厘米（cm）
- 屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
- 比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
- 如何计算手机尺寸？
知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。
- 设备尺寸是指设备对角线的长度，单位为英寸（inch），简称“寸”。
物理像素–UI设计师像素
- 物理像素/屏幕分辨率/物理分辨率：
- 屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
- 单位：px，即1px=1个像素点
- 比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素
- 注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的
- 设备像素一般采用 水平分辨率 和 垂直分辨率 组成。
- 例如：iPhone 6 的设备像素为 750 * 1334。
- “设备像素”的特点：
出厂就设置好
是设备的固有属性
不会发生变化。 - 苹果系列商品的参数
- 重点：
- UI----物理像素
- 前端—逻辑像素
逻辑像素/设备独立像素DIP—WEB
- 逻辑像素/设备独立像素
- 也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
- 这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)
- 设备独立像素：Device Independent Pixel，简写为DIP，也被称为“逻辑像素”。
- 高分辨率对于移动设备来说是有副作用的！
iPhone 4用4个物理像素表示1个设备独立像素（横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素），这一切都是由操作系统控制的。
屏幕像素密度PPI
- 屏幕像素密度
- 像素密度：Pixel Density，简写为PD，单位尺寸的屏幕上所含有的设备像素个数。
- 单位：像素/英寸，Pixel Per Inch（PPI）。
设备像素点有时候也被称为“点”（dot），因此在移动显示屏领域，像素密度也可以用点/英寸为单位，即Dots Per Inch，DPI。 - 每英寸屏幕所拥有的像素数，英文简称PPI
- 单位dpi
- 解析：
- 屏幕是由很多像素点组成的。平时说的分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。
- 而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。
- 所以，这里引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。
- Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。
- 1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
设备像素比DPR
- 设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。
- iPhone6—物理像素7501334，像素比DPR为2，逻辑像素375667
- 讲到这里可能有人会问像素还分物理和逻辑？这两个有啥区别？
- 其实在很久以前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1
- 但是后来事情起了变化，Retina视网膜技术使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多
- 设备像素比：Device Pixel Ratio，简写为DPR，设备上设备像素和设备独立像素的比值。
- 像素比DRP
- 物理像素与逻辑像素之间比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素
- 设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。
视网膜显示屏Retina
- Retina：
- 所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。简单理解为种新型高分辨率的显示标准。
- 这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
手机电脑对比图
- 电脑
- 手机
视网膜显示屏Retina
- Retina：
viewport
- viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
- 也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。
倍率与逻辑像素
- 倍率与逻辑像素：
- Retina屏幕把2×2个像素当1个像素使用。
- 比如原本44像素点高的顶部导航栏，在Retina屏上用了88个像素点的高度来显示。导致界面元素都变成2倍大小，效果和3gs一样，但画质却更清晰了。
- 苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
- 注意：设备像素比是视网膜屏与非视网膜屏的一个识别区别：非视网膜屏的设备像素比为1，视网膜屏的设备像素比大于等于2。
- CSS像素：编写移动端项目时所设置CSS属性取值被称为CSS像素。
- 在项目没有被缩放的情况下，CSS像素就是设备独立像素。
物理像素与逻辑像素
- CSS中的1px并不等于设备的1px
- 在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
- 但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。
- CSS中的1px并不等于设备的1px
- 在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320*480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
- 后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的，需要使用大约4个物理像素来显示一个CSS像素。
- 实现真正的1物理像素
- 当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。
- 面试：iphone6—1px:2个物理像素----transform:scale(0.5)
- eg：border-width:1px并不是最小边框，浏览器可以显示的最小粒度比1px还要小。为什么会出现比border-width:1px更细的边框？
- 实现真正的1物理像素
- 屏幕能够显示的最小粒度是1个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置
<meta name="viewport" content="width=device-width, initial-scale=0.5">- 举个例子，iPhone 6的物理像素上面已经说了，是750*1334，那它的逻辑像素呢？
- 我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375*667，这就是它的逻辑像素，据此很容易计算出DRP为2。
- 还可以直接通过window.devicePixelRatio这个值来获取DRP，打印结果是2，符合我们的预期。
- 1px边框问题
- 在苹果的带动下，Retina技术在移动设备上已经成了标配，所以前端攻城狮必须直面如下事实：
- 想画个1px的下边框，没法像安卓或iOS的同时那样直接操纵物理像素点ui,这就是初级前端面试必考题之“1px边框问题”的由来。
- 最推崇的方法还是利用CSS3的transform: scale，因为简单直接、适用性和兼容性好。即transform: scale(0.5)
手机屏幕尺寸
rpx适配
- rpx是小程序中的尺寸单位，它有以下特征：
- ①小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
- ②1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px
- 由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。
WXSS尺寸单位
- 原理:
- 小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
vw、vh适配
- vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
- ①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
- ②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
- 所以，在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。
物理像素与逻辑像素
- 小结：
- 工程师尺寸就是逻辑像素，设计师尺寸就是物理像素；
- 小程序编译后，rpx会做一次px换算
- vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。但是一般情况下，百分比+rpx就已经足够使用了,所以出场机会很少
- 二倍图：1个逻辑像素等于2个物理像素
完毕，如有疑问请随时联系小编！
微信小程序（布局适配与物理逻辑像素）相关推荐
- 微信小程序----布局适配与物理逻辑像素
屏幕尺寸 屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等 如何计算手机尺寸? 知道手机屏幕的长和 ...
- 7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言 移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下 关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
- 微信小程序 （布局适配与物理逻辑像素）
移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等 关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显示屏Retina.rpx ...
- 微信小程序布局技巧（三）
微信小程序布局技巧(三) 前言 小程序适配 物理像素 小程序中的px px和rpx转换 应用 尾巴 前言 本文是微信小程序(本文后面统称小程序)布局技巧系列最后一篇文章,主要说明小程序的屏幕适配问题. ...
- 微信小程序开发系列四：微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
- 微信小程序中适配iphoneX兼容性
今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图: 于是乎就翻了翻小程序的API文档,果不其然在小程序 ...
- 微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
没接触过 JavaScript.CSS.HTML的小白直接开始接触微信小程序的开发,在了解了各个部分的作用以后,布局的时候就发现:怎么这么多单位??? px.rem.rpx.vw.vh.n% 为了不总 ...
- 【IoT】 产品设计：微信小程序如何适配不同机型
rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx,即750个物理像素,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度 ...
- 微信小程序页面跳转、逻辑层模块化
一.页面的跳转 微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式. 函数跳转: 1.wx.navigateTo(OBJECT): wx.navigateTo({url: 'test?id= ...
最新文章
- 使用canvas绘制圆形进度条
- Google Maps API 进级：通过XML文档加载Gpolyline或者Gpolygon
- 波士顿动力「全家」跳舞贺新年，马斯克点赞视频：这不是CG！
- 【牛客 - 331B】炫酷五子棋（STLset 或Hash，tricks，二维map标记）
- 数学大家闵嗣鹤：生死哥德巴赫猜想
- 一本通1594涂抹果酱
- Linked List Sorting (链表)
- mysql占用CPU超过100%
- matplotlib 点线动画
- 四川大学计算机学院软件工程期末,2015四川大学软件工程期末复习.doc
- 什么是“use strict”,好处和坏处
- 软件领域专利申请的特点及案例
- IDEA输入字母间距变大报红
- Java 8 流过滤List
- 【第3期赠书活动】〖Python 数据库开发实战 - Python与Redis交互篇⑬〗- 综合案例 - 新闻管理系统 - 编辑新闻(编辑角色权限)
- 计算机开不了机反复重启,电脑一直反复重启,就是开不了机,怎么处理
- 来淄博旅游 2055
- 程序人生 | 从导游转行测试工程师：人总在期盼一个改变自己的机会
- 关于mysql group by后取指定的数据留下来
- 电信管理局：2011推进三网融合走向深入