2018.9.24 星期一 22:31
像素和物理像素
一个显示屏的成像原理是通过一系列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。这每一个小点被叫做一个物理像素。
另一个常见的数据叫每英寸像素取值（Pixel per inch，简称PPI），意思是每一英寸内的物理像素数量，计算公式是 (屏幕尺寸指的是屏幕对角线的长度)
如果一个CSS像素占用n个物理像素，那么我们就说此时的dppx（dots per pixel）数为n。
dppx是一个单位。设备有多少dppx除了跟设备本身的PPI有关，也和当前的缩放状态有关，
因此在浏览器不缩放的情况下若一个CSS像素等于一个设备像素，那么因为页面尺寸过小，会影响我的浏览，所以火狐浏览器贴心地进行1.25dppx的设置，使得1CSS像素等于1.25物理像素（反观Chrome仍为1）
是的，可以说dppx可以看作devicePixelRatio（设备像素比，简称DPR）的单位，尽管DPR本身并不需要单位。综上可以看出，DPR由浏览器厂商确定。dppx可以看作window.devicePixel的单位，同时也可看作媒体查询中device-pixel-ratio的单位。
设备独立像素
通常所说的像素，就是CCD/CMOS上光电感应元件的数量
分辨率:手机在横向、纵向上的像素点数总和，一般描述成 宽*高
像素密度=像素/尺寸 （dpi=px/in） $_PS:在不涉及打印机时和ppi一个概念
标准屏幕像素密度（mdpi）:每英寸长度上还有160个像素点
像素密度等级:
设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。
位图像素:位图像素是栅格图像（如：png,jpg,gif等）最小的数据单元。
理论上来说，1个位图像素对应1个物理像素，图片才能等到完美清晰的展示。
但是上面说过，在retina屏幕上，会出现1个位图像素对应多个物理像素。
媒体查询中，min-width、max-width的查询即是对布局视口宽度的查询。
在移动端，默认的情况下，布局视口的宽度是要远远大于浏览器的宽度的。
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
1、PX(CSS pixels)
1.3 那么PX到底是什么？
px实际是pixel（像素）的缩写，根据 维基百科的解释，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！
不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi：
ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
dpi：每英寸多少点。
关于打印机的点距我们不去关心，只要知道 当用于描述显示器设备时ppi与dpi是同一个概念 。
从上面的例子可以看出，CSS像素从来都只是一个相对值。
2、DP(device pixels)
设备像素（物理像素）:顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。
3、DIP(Device independent Pixel)
设备独立像素，也称为逻辑像素，简称dip。
根据上述设备像素与CSS像素之间的关系、及DPR的官方定义，我们可以推断出：
CSS像素 =设备独立像素 = 逻辑像素
$_PS: 区分于物理像素=设备像素；dpr换算
5.3 ppi和dpr到底什么关系？
毕竟这些参数是外国人先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数，因此ppi就用作显示设备的工业标准；
告诉业界人士，ppi达到多少是高清屏，此时对应的dpr是多少，而不直接告诉你我现在的显示设备dpr是多少，毕竟人们直接听到像素分辨率会更加有反应。
设备像素比与ppi相关，一般是ppi/160的整数倍：
像素 - 什么是像素
CSS像素是给我们web前端开发者创造的抽象概念。所以你要记住：当你给元素设置了 width: 200px 时，这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素，至于会跨越多少个设备像素，就取决于手机屏幕的特性和用户的缩放了
web前端领域，像素分为设备像素和CSS像素(苹果设备 200css像素等于400个设备像素)
一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。
如果用户缩小页面，那么一个CSS像素会明显小于一个设备像素
移动端的三个视口
有没有想过html元素的宽度是基于谁的呢？这个时候，就要引出一个概念：初始包含块和视口了
记住一句话：视口是html的父元素，所以我们称视口为初始包含块。 这样你就明白了，html元素的百分比是基于视口的。
第一个视口：布局视口
布局视口：移动端CSS布局的依据视口，即CSS布局会根据布局视口来计算。
也就是说，在移动端，视口和浏览器窗口将不在关联，实际上，布局视口要比浏览器窗口大的多(在手机和平板中浏览器布局视口的宽度在768~1024像素之间)
document.documentElement.clientHeight
第二个视口：视觉视口
第三个视口：理想视口
我们前面提到过，布局视口的宽度一般在 680~1024像素之间，这样可以使得PC网站在手机中不被压扁，但是这并不理想，因为手机更适合窄的网站，换句话说，布局视口并不是最理想的宽度，所以，就引入了理想视口。
但是最终作用的还是布局视口，因为我们的css是依据布局视口计算的，
下面这段代码可以告诉手机浏览器要把布局视口设为理想视口：<meta name = "viewport" content = "width=device-width" />
$_PS:
然而，这段代码其实也并不完美，在IE浏览器中，由于横屏竖屏的切换会对其造成影响，为了解决这个兼容性的问题，最后再加上一句，就有了现在的：<meta name = "viewport" content = "width=device-width,initial-scale=1" >
三、设备像素比(DPR)
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
（公式成立的大前提：缩放比例为1）
与理想视口一样，设备像素比对于不同的设备是不同的，
可知iPhone5的设备像素为 640*1136
23:14
