关于屏幕像素的一些内容

[chiwent]

关于屏幕像素的一些内容

1 屏幕像素的基础

关于屏幕像素，我们可以基本列出和它有关的一系列概念：虚拟像素、物理像素、设备独立像素、逻辑像素、PPI、DPI、DPR、DIP。是不是很让人头大？下面大致地梳理一下它们的概念和关系。

首先是物理像素，它也被称为设备像素，英文缩写DPI，是设备能控制显示的最小物理单位，其单位是pt。总所周知，屏幕是由一个个物理像素点组成的，比如像OLED屏幕，它的每一个物理像素点都会发光，当像素点一同工作，就可以显示图像。所以，当屏幕完成后，物理像素点就是大小固定的。比如，我们接触到的一些手机屏幕参数如1080P，指的就是物理像素这个概念。

虚拟像素，又称作CSS像素，可以理解为直觉像素，它是web编程中的抽象概念，指的是CSS样式中使用的逻辑含义上的像素。它的单位长度可以分为两类，绝对和相对单位，其中px是一个相对单位，相对是就是前面提到的物理像素。在一些设计稿中，会遇到pt这个单位，它就是逻辑像素，属于真正的CSS绝对单位，1pt = 1/72(inch)， inch即为英寸，所以它和物理像素是保持比例不变的。

在同一个设备中，每个CSS像素所代表的物理像素可以是变化的；在不同的设备中，每个CSS像素所代表的物理像素也是可以变化的。

由于不同的物理设备的物理像素是不同的，而在使用CSS设置样式时，我们希望浏览器做一些调整，使得浏览器的CSS像素大小在不同的物理设备上看起来差不多一样大。所以就需要结合设备的物理像素进行换算，因此它是一个相对单位。举一个例子来介绍CSS像素的相对性。假如电脑屏幕为1080P，浏览器中的一个页面中的容器宽度为540px，显然这个容器占据了页面的一半。假如我们将浏览器放大显示（通过CTRL + +），放大为原来的两倍，那么这个容器的宽度就和屏幕一致了。但是此时的CSS像素大小是没有改变的，更别提物理像素了。在放大前，假设CSS像素和物理像素的比例为1：1，经过放大后，CSS像素就被拉伸，比例变为2：1。

既然说CSS像素是一个相对单位，那么CSS像素会受到什么因素影响呢？

• PPI，每英寸像素，指的是每英寸所拥有的像素数目，或者也可以成为像素密度。如果它的数值越高，单位面积像素越多，代表屏幕能以越高的密度显示图像。苹果公司推崇的视网膜屏其实就是高PPI屏的意思。
• 设备像素比，在未缩放的状态下，它等于设备像素/CSS像素，可以理解为1px由多少个设备像素组成。比如iPhone 6/7/8的 DPR 等于2，一个CSS像素可以用2*2个设备像素点来绘制。

DPR，就是设备像素比的意思，它等于设备像素/CSS像素，比如iPhone 6/7/8的 DPR 等于2。通过这个参数，我们可以得知设备上的一个css像素代表多少个物理像素，如前面提到DPR等于2的iPhone设备，1个CSS像素相当于2*2个物理像素进行绘制。

在DPR=2的设备中，我们加上这一段meta：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

而在DPR=3的设备中，可以加上：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

DIP，指的是设备独立像素，大小等于CSS像素。

2 移动端适配

在了解了屏幕像素的一些内容后，实际上就会发现这些内容和前端静态页面编写是息息相关的。
移动端网页设计是一个复杂的问题，现存有很多的适配方案，以下将阐述几种。

2.1 多套代码，多个域名下部署

在这种开发方式下，可以分别设计PC和移动端两套UI图纸，然后独立编码，再将它们发布到不同的域名下（一般移动端会带有m前缀），比如新浪微博。

2.2 响应式布局

主要是运用@media媒体查询进行布局，需要提供不同的UI设计稿，分别编写多套的样式代码。和前面的方式不同，它可以将多套UI部署到同个域名下。一般的，对于展示要求高、兼容设备要求高的网站都采用这套方案，它可以充分利用不同设备的屏幕空间进行内容的展示。

2.3 rem布局

前面提到，我们编写样式时接触到的单位px实际对应的是CSS像素，它是一个相对单位，所以在不同设备上，它所展示的物理像素是不一定一致的，假如只采用px进行样式编写，可能就会遇到高分屏下显示模糊的问题。为了解决这个问题，我们可以采用rem方案。rem是一个以根节点字体大小为基准的单位。在基准统一的前提下，屏幕缩放不会导致CSS像素变大或变小的情况，保证了图像的清晰。如果根字体的大小默认是16px，那么1rem就永远等于16px。为了实现rem布局，我们可以使用postcss和阿里flexable.js进行开发，在样式编写时，我们实际还是采用px作为单位，然后经过转换后，浏览器的样式会以rem作为最终的单位。

一段常见的rem布局转换代码：

(function () {
　　　function changeRootFont() {
　　　   var designWidth = 750, rem2px = 100;
　　　   document.documentElement.style.fontsize = 
　　　  ((window.innerWidth / designWidth) * rem2px) + 'px';
　　　  //iphone6: (375 / 750) * 100 + 'px';
　　　}
　　　changeRootFont();
　　　window.addEventListener('resize', changeRootFont,false);
})();

这段代码以iPhone作为设计基础，将根节点字体大小设为100px（为了方便计算）。

2.4 vw/vh布局

vw/vh是相对于视口宽度/视口高度的比例单位，1vw相当于视口宽度的1%，vh同理。它可以实现目标自适应屏幕尺寸。从这两者衍生出来的还有vmin和vmax，分别代表选取vw和vh中最小的以及vw和vh中最大的。同样的，vw/vh布局也可以通过postcss对px进行转换，当然也可以考虑用一些CSS预处理器的函数进行转换。

---

参考：

• 什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP
• CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
• 移动前端开发之viewport的深入理解