「理论基础」关于Screen与Px的问题分析

哈哈刚刚经历完多科考试 今天我们来聊聊Screen与Px问题

空间混合法

正常来讲我们所接触的所有颜色从视觉角度都是由三原色(rgb)即红绿蓝构成

那么

图片有些丑了 但是确实是 中间的颜色由于重叠所以出现了不一样的颜色。

但是这个方法在光下时没问题的而在我们的硬件设备上是不真实的。

所以我们的在硬件上就有的像点问题。

像点

其实每个像素都由这三个像点组成 每个像点的三原色的不同强度调整 致使人的视觉产生误差 已经不能识别到其中一个像点的消失 导致颜色的改变。

CRT显示屏

说到屏幕不得不说我们上古时期的大头娃娃

它的发光原理如上图，电子枪通过高束通过荫罩打击到荧光粉上，不同颜色的荧光粉发光 导致像素点颜色的改变。那么荫罩的作用即是防止电子枪发射光束时导致光束发散而影响其他光束。ps：像叶子的当然是我们看的屏幕了

LCD液晶屏（led）

图有些乱哈，左侧是两个通电板夹住液晶。液晶顾名思义就是在特殊状态下可以由液体与固体相互转化。通过状态的转化导致光偏折或者通过，再经过滤光片(也是拥有红绿蓝三种颜色)通过空间混色法， 导致屏幕成像。

像素的大小（点距）

上图与刚开始的栅格版是异曲同工的 只是表达形式不同。我们把每个三角形作为一个像素。是其实像素的大小是不太好求的，但是我们一般都用点距表示。也就是说两个相同颜色的像点之间的距离。通常我们利用点距的大小来表达成像的细腻程度。

参照像素(css像素)（逻辑像素）

我们首先要了解 dpi = ppi (一英寸所能容纳的(墨点数)像素点数)

我们的参照像素一般固定为 96dpi === 一臂的距离的视角去观察显示出的具体大小

所以标杆 为 1/96 * 英寸

假设 200dpi 约等于 === > 2 : 1 参照像素

设备像素比(整数) dpr = 物理像素(点距)/css像素

我们也管css编程的逻辑像素方式 叫做逻辑屏幕

Ps：分辨率 在固定宽高下 展示的像素点数。所以在不知道宽高的情况下 想判断屏幕细腻与否请关注ppi哦！