三种像素的概念

物理像素 ：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据 *** 作系统设置自己的颜色和亮度。

设备独立像素 ：设备独立像素也称为密度无关像素，这个概念可能有点抽象，大家可以这么来理解  iPhone6的尺寸是375X667 这就可以理解为设备独立像素

设备像素比（dpr） :设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。

css像素 ：CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

移动端

pm 移动端页面布局

d性布局(100%布局)——拉钩、天猫首页

d性布局（100%布局）的特点：

顶部与底部的bar不管分辨率怎么变，它的度和位置都不变；  中间每条招聘信息不管分

辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边

等比缩放布局(rem布局)—网易、淘宝首页

什么是屏幕尺寸？

移动端屏幕尺寸:屏幕对角线的长度，单位是英寸(1英寸=254厘米)。

常见的尺寸有：24，28，35，37，42，50，55，60

什么是屏幕分辨率？

屏幕分辨率：指横纵方向上的像素点数，单位为px,1px=1个像素点。

一般以纵向像素横向像素表示 一个手机的屏幕分辨率。如：19601080

这里的一个像素是指物理设备的一个像素点。

什么是屏幕像素密度？

屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi(pixels  per inch)缩

写。

iphone3GS和iphone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍数。

PX:像素，将显示器分成非常细小的方格，每一个方格就是1px。

注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。

实际上像素分为两种：设备像素和逻辑像素（ CSS像素）

DPR：设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下，设备像素和CSS像素的

比值

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来

越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕，是

因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分

辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于

是DPR = 2

1rem是什么

rem(font size of the root element)是指相对于根元素的字体大小的单位。

2为什么web app要使用rem？

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏

幕,根据变化html的字体大小来控制rem的大小,

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，

Android browser44+支持，chrome for android39支持

1rem

rem是指相对于根元素的字体大小的单位。

2根元素

如果根元素是相对设备尺寸自动变换。

3VW

视窗宽度，1vw等于视窗宽度的1%。

4VW转换成PX赋值给font‐size

例：设备的分辨率为6401136，逻辑像素为320568     1VW=32px

Font-size:100px;转换成VW    font‐size:3125vw;

1rem=3125vw可一起结合写等比例缩放布局。

1px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被

人为设置，则相对于浏览器的默认字体尺寸。  

3rem

rem是指相对于根元素的字体大小的单位。

4VW

视窗宽度，1vw等于视窗宽度的1%。

px(CSS pixels) : 逻辑像素，浏览器使用的抽象单位，多用于css样式单位，通常也是设计师使用的单位。

dp(device pixels) : 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt(以下为了清晰暂用dp代替)。pt在css单位中属于真正的绝对单位，1pt = 1/72(inch),inch及英寸，而1英寸等于254厘米。

dpr(devicePixelRatio) : 设备像素缩放比。计算公式：dpr = dp/px；1px=dprdprdp(px是个正方形，长宽);

Reactnative中使用dp为单位

例：

iphone6宣称的分辨率是7501334，这里指的是物理像素，但是在模拟器上显示出来的却是宽375像素(CSS逻辑像素)，iphone6的375px667px就是因为它的dpr等于2。此时一个css像素就会占据四个物理像素的位置，在x轴方向占两个，在y轴方向占两个。

通常我们的设计师会以iphone6为设计稿，也就是375px667px进行设计，此时如果我们使用iphone6(375dp667dp)进行开发显示：

严谨的说在单一方向上，如水平方向 1px=1dp,375px=375dp(也是宽度满屏)

但如果我们在设备像素不等于(375dp667dp)的设备上，例如iphone6s Plus(414dp736dp)，

我们设置

至此，问题浮现，我需要一个适配转换方法，使设计稿上的375px就是满屏，显示到任意设备像素的屏幕上还是满屏。

方法原理：

虽然单位不同，但是元素所占屏幕宽度的比例是相同的

利用元素所占屏幕比例不变的特性，来将 px 转为 dp（这样实现屏幕适配的话，在不同尺寸的屏幕下，元素会等比放大或缩小）

公式如下：

设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）

我们要求的就是 元素的宽度（dp）

可以得出：

元素的宽度（dp,这是我们最后得到写到程序里的数值） = 设计稿元素宽度（px） 屏幕的总宽度（dp） / 设计稿总宽度（px）

放到ReactNative里实现

在确定了转换方法以后，我们只需在设置长度时调用转换方法即可

此处的异形屏多指刘海屏，水滴屏，异形屏的statusbar(也就是显示信号，电量的顶部行)的高度会比正常的屏幕要高一些。

ReactNative官方给了一个解决方法：

SafeAreaView 会自动根据系统的各种导航栏、工具栏等预留出空间来渲染内部内容。更重要的是，它还会考虑到设备屏幕的局限，比如屏幕四周的圆角或是顶部中间不可显示的“刘海”区域。

至此你的刘海屏的问题会得到解决,但是SafeAreaView只在ios生效，android还得使用StatusBar组件( >

屏幕对角线的长度，单位是英寸

1英寸 = 254厘米 6254 = 1524厘米

在横纵方向上的像素点，单位是px, 1px = 1个像素点（这里的1像素指的是物理设备的1个像素点）

iphone 6 的分辨率是1334 750像素，一般是纵向像素 横向像素来表示一个手机的分辨率

屏幕上每英寸可以显示的像素点数量，单位是ppi

屏幕像素密度与屏幕分辨率有关

物理像素： 指的设备的固定像素（1334750）

设备像素： 可以看成计算机坐标中的一个点

一个位图像素是栅格图像（png,jpg,gif等）最小的数据单元，至少一个位图像素对应1个物理像素，才能完美清晰的展示

devicePixelRatio指的是物理像素和设备独立像素的比，即1独立像素由多少个物理像素渲染

windowdevicePixelRatio可查看当前显示设备的物理像素分辨率与CSS像素分辨率的比率

设备像素比devicePixelRatio = 物理像素 / 独立像素

因为不同设备具有不同的dpr+所代表的设备像素不同，所以在有些设备上看到的粗，有些设备看到的细，如何解决：像素边框问题

缺点： 小数像素目前兼容性较差，一些以前的版本可能不支持,理论上最小的单位是 1px , 所以会出现有的设备写05px无效（没有边框）的情况

缺点： 不是所有的设备的dpr都是2 所以固定缩放05也会有问题

定义：在移动端viewport视口就是浏览器显示页面内容的屏幕区域，在viewport中有两种视口，分别表示为：visual viewport(可视视口)和layout viewport(布局视口)

两个视口是叠加在一起

visual viewport 固定大小跟屏幕大小相同，可以通过windowinnerWidth来获取

视口默认的宽度是980px,我们可以用meta标签来调视口看度，此时视口宽度被束缚为320-480之间

现代网页需要将layout viewport 设置成跟visual viewport相同的大小，方便网页制作

通过<meta>标签进行设置，name属性指定viewport的值，content属性进行视口配置

现在手机屏大小不一，而且屏幕硬件性能也各不相同，一般的UI设计都是基于特定机型画设计搞件的，常见的是基于iPhone6的分辨率设计2倍图，以iPhone6为例，屏幕物理像素宽度是750，网页宽度为375PX。开发中还要根据不同手机留出设计余量，因为不同分辨率的手机显示时会有拉伸位移。

网上也有一些方案，处理高清屏适配方案，但一般也只把DPR适配到2，彩用所有长度单位放大2位，网页整体缩放50%的的做法，比如ant-mobile就支持这种方式，它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小，但是这种方式在遇到网页实际宽度大于375的设备时，还是不能1：1的还源UI设计稿。

我个人在项目中采用的是更复杂的实现方式，可以实现适配DPR大于2的手机屏，并接近100%的还源UI设计稿。具体的适配技术各家大同小异，这里不再细说，我只给出我自己的适配方案。

同大多数适配方法一样，通过 rem 设计一个基础的大小单位 ，做为整个页面的基础单位，再根据屏幕物理DPR结合屏宽计算这个单位的大小，

基础单位 = 屏幕DPR 网页宽度 / 375（设计稿基准为375）

网页缩放值 = 1 / 屏幕DPR

比如我的方案是把rem设为10px 再乘以“基础单位”，这样在设置一个设计稿上14号字的时候，就写 14rem就可以了。另外编写页面布局时，也用这个计算出来的相对单位，这样可以做到不管什么样的屏幕，UI设计搞都不会因宽度变化而变形。另外，如果使用ant-mobile这样的支持高清方案的UI中间件，直接在配置中把它的LESS常量 “@hd”设置 为 “01rem”就可以了。

另外还有一个小的福利，就是在这个方案下，当你想画出“1物理像素”的细边框时，直接用 “1px”，就可以了，因为在这个方案下，1px对应的是一个物理像素。

下面给出我实践中使用的适配代码：(这是直接放在HTML文件中的版本）

//计算屏幕比例并设置html的font-size

/

将html字号设置为10个设计像素（一个基准系数，即rem为10 设计稿像素）

设计一个缩放系数，以应对可能出现的适配高清屏要求

/

( function () {

/初始化方法

_standard 设计稿对应的分辨率

base_DPR 设定最小DPR值

/

function setInitialRem( _standard, base_DPR) {

//取得当前设备DPR

var dpr = window devicePixelRatio || 1;

//如果设定了默认最小DPR值

if ( base_DPR) {

dpr = dpr >= base_DPR dpr : base_DPR;

}

//设定缩放视图比例

var scale = 1 / dpr;

//设直视图缩放比例

document head querySelector( 'meta[name="viewport"]') content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";

//取得当前设备宽度

var device_width = document documentElement clientWidth; //windowinnerWidth;

//标定原稿设计基准值 当前稿件设计宽度为 iPhone6/6s 375像素

var standard_width = _standard dpr;

//设定基准单位

var base_value = 10;

//基准系数=设备宽度➗稿件基准宽度✖️设备DPR✖️10

var rem = device_width / standard_width dpr base_value;

//设置 REM

document documentElement style fontSize = rem + "px";

}

window addEventListener( "resize", function () { setInitialRem( 375, 1); });

setInitialRem( 375, 1);

})();

以上就是关于三种像素的概念全部的内容，包括:三种像素的概念、移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率、ReactNative适配探讨等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！