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

前言

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下

关键词：
屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。

屏幕尺寸

华为荣耀7

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

比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

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

物理像素–UI设计师像素

物理像素/屏幕分辨率/物理分辨率：
屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
单位：px，即1px=1个像素点
比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素
注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的

苹果系列商品的参数

重点：

UI----物理像素
前端—逻辑像素

面试题：

移动端的设计图是几倍图？
苹果6开发，设计师给的是2倍图，375逻辑像素，750设计师

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

逻辑像素/设备独立像素
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)

屏幕像素密度PPI

屏幕像素密度

屏幕像素密度
每英寸屏幕所拥有的像素数，英文简称PPI
单位dpi
解析：
屏幕是由很多像素点组成的。平时说的分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。
而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是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

viewport

viewport:
viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。

倍率与逻辑像素

倍率与逻辑像素：
苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

注意：设备像素比是视网膜屏与非视网膜屏的一个识别区别：非视网膜屏的设备像素比为1，视网膜屏的设备像素比大于等于2。

倍率与逻辑像素：
移动设备的设备独立像素可以使用下列代码获得：

水平设备独立像素：screen.width

垂直设备独立像素：screen.height

CSS像素：编写移动端项目时所设置CSS属性取值被称为CSS像素。
在项目没有被缩放的情况下，CSS像素就是设备独立像素。

物理像素与逻辑像素

CSS中的1px并不等于设备的1px
在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，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个物理像素，iPhone4的像素比为2，设置border-width:1px后，边框占了4个物理像素，如果能让边框的宽度为1物理像素，那么它就比1个CSS像素要细，这可以通过设置

举个例子，iPhone 6的物理像素上面已经说了，是7501334，那它的逻辑像素呢？
我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375667，这就是它的逻辑像素，据此很容易计算出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个物理像素

如有问题或者疑问请留言联系小编！！！！！

感谢来访！！！！！

7.微信小程序（布局适配与物理逻辑像素）相关推荐

微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 比如常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等如何计算手机尺寸? 知道手机屏幕的长和 ...
微信小程序（布局适配与物理逻辑像素）
移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显示屏Retina.rpx ...
微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP.像素密度PPI.像素比DPR.视网膜显 ...
微信小程序布局技巧（三）
微信小程序布局技巧(三) 前言小程序适配物理像素小程序中的px px和rpx转换应用尾巴前言本文是微信小程序(本文后面统称小程序)布局技巧系列最后一篇文章,主要说明小程序的屏幕适配问题. ...
微信小程序中适配iphoneX兼容性
今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 于是乎就翻了翻小程序的API文档,果不其然在小程序 ...
微信小程序开发系列四：微信小程序之控制器的初始化逻辑
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法这个教程的前两篇文章,介绍了如何 ...
【IoT】产品设计：微信小程序如何适配不同机型
rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx,即750个物理像素,1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度 ...
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
没接触过 JavaScript.CSS.HTML的小白直接开始接触微信小程序的开发,在了解了各个部分的作用以后,布局的时候就发现:怎么这么多单位??? px.rem.rpx.vw.vh.n% 为了不总 ...
微信小程序屏幕适配不同的iPhone
wx.getSystemInfo(Object object) | 微信开放文档 wx.getSystemInfo({success (res) {console.log(res.model)cons ...

7.微信小程序（布局适配与物理逻辑像素）

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

前言

屏幕尺寸

物理像素–UI设计师像素

苹果系列商品的参数

重点：

面试题：

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

屏幕像素密度PPI

设备像素比DPR

视网膜显示屏Retina

手机电脑对比图

视网膜显示屏Retina

viewport

倍率与逻辑像素

水平设备独立像素：screen.width

垂直设备独立像素：screen.height

物理像素与逻辑像素

手机屏幕尺寸

rpx适配

WXSS尺寸单位

vw、vh适配

物理像素与逻辑像素

小结：

如有问题或者疑问请留言联系小编！！！！！

感谢来访！！！！！

7.微信小程序（布局适配与物理逻辑像素）相关推荐

最新文章

热门文章