屏幕尺寸
屏幕尺寸指的是以屏幕对角线的长度来计算的，单位是英寸。1英寸（inch）= 2.54厘米
手机的屏幕是以英寸为单位的；英寸代表的是手机屏幕对角线的长度；
像素
屏幕分辨率
屏幕分辨率指的是在横纵向上的物理像素个数，单位是px；1px = 1个像素点数（这里的像素指的是物理设备的一个像素）；
一般以纵向像素 * 横向像素表示一个手机的分辨率；比如：1980*1080；
在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好了的；只有不同的设备之间才有像素大小的区别；
屏幕像素密度（PPI)
屏幕像素密度指的是每英寸上物理像素的个数；
屏幕像素密度也叫像素密度或屏幕密度；
屏幕像素密度，即屏幕上每英寸可以显示的像素点的数量，英文为pixels per inch，简称PPI。这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关。他们之间有一个公式：
物理像素（设备像素）
物理像素又称为设备像素；一个物理像素占据的实际屏幕尺寸在不同的设备上是不一样的；
设备出厂时，该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是不会变的；
设备独立像素
设备独立像素是设备对接css像素的接口，一旦css像素与独立像素联系起来（width=device-width)，此时像素比才能发挥真正的作用；
设备独立像素的作用
设备独立像素可以看成是设备提供出来的接口，它用来对接应用的一些概念：比如浏览器中的css像素，浏览器厂商对接上独立像素时，浏览器厂商设计的移动端规则才能发挥作用，否则采用默认的规则；
css像素
css像素是web开发者使用的最小单位；
css像素是个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）web页面上的内容；
一个css像素最终一定会转成物理像素去屏幕上呈像；
在一个标准的显示密度下，一个css像素对应一个设备像素（物理像素）；css是一个抽象单位，因为呈像的时候需要在设备上呈像，呈现出来是什么样子的与一个css像素包含多少个物理像素有关；css像素是浏览器特有的概念；
假设有一个width为200px的元素，它占据了200个css像素，但这200个css像素占据了多少个物理像素取决于屏幕的特性（如：是否是高密度，即像素比）和用户的缩放行为；
一个css像素到底占据多少个物理像素和谁有关？
（1）屏幕的特性
（2）用户的缩放行为
不考虑用户缩放
没有viewport：
（1）这块屏幕横向上占据了多少个物理像素（横向分辨率）
（2）这块屏幕横向上占据了多少个css像素（视觉视口的横向尺寸）
有viewport：
像素比
考虑用户缩放
在屏幕的特性的基础上：
（1）放大：1个css像素占据更多的物理像素；
（2）缩小：1个css像素占据更少的物理像素；
css像素与物理像素的关系
如果在iPhone的视网膜屏上，视网膜的像素密度是普通屏幕的两倍，这个时候200px个css像素就跨越了400个设备像素。如果用户放大，它将跨越更多的设备元素。
css像素与用户缩放的关系
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为1000px，页面上同时有一个500px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
位图像素
位图像素是图片的最小单位；一个位图像素是栅格图像（比如：png、jpg 、gif）等，最小的数据单元。 一个位图像素对应一个物理像素，图片才能得到完美清晰的展示。
设备像素比
设备像素比为设备物理像素和设备独立像素的比例；
device pixels ratio = 物理像素/设备独立像素；
可以通过 window.devicePixelRatio 来获取；
占据一块iPhone 6的屏幕需要750x1334个物理像素；
占据一块iPhone 6的屏幕需要375x667个设备独立像素；
也就是说1个设备独立像素=4倍物理像素 （面积）；
设备像素比 = 一个方向上沾满一块屏幕需要的物理像素个数/一个方向上沾满屏幕需要的设备独立像素的个数；
当我们写上meta标签后，width=device-width 使css像素和设备独立像素联系了起来，即css像素等于设备独立像素。在iPhone6下，即：
1css像素=4倍物理像素
视口
移动端浏览器厂商面临的问题：
他们如何将数以万计甚至数以亿计的PC端网页完整的呈现在移动端设备上？并且不会出现横向滚动条？
根据上述问题，引申出了三个viewport（视口）理论：
首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
所以在PC端进行布局的时候会相对于默认的980px进行布局，这个默认980px的视口称为布局视口；在手机端，如果按照980px显示内容，那么右侧可能有一部分区域无法显示，所以在手机端浏览器会默认对页面进行缩放以显示到用户可见的区域中，显示在可见区域的这个视口，就是视觉视口；在PC端布局的时候布局的视口可能会超过移动端的可视视口，所以手机浏览器会将页面缩小以查看所有内容；
布局视口
布局视口决定页面的布局；
浏览器默认的viewport（视口）叫做layout viewport（布局视口）
ppk把这个浏览器默认的viewport（视口）叫做 layout viewport（布局视口），这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。
视觉视口
视觉视口决定用户能看到什么
一个css像素到底占据多少个物理像素和视觉视口有极大的关系；
一个视觉视口的实际尺寸是确定的（屏幕尺寸）；
一个视觉视口包含的物理像素的个数是确定的（分辨率）；
一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）；
layout viewport（布局视口）的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visual viewport（视觉视口）；visual viewport（视觉视口）的宽度可以通过window.innerWidth来获取；
理想视口
如果所有的页面都按照980px在移动端布局，那么最终页面都会被缩放显示，事实上，这种方式是不利于我们进行移动端的开发，我们希望的是设置100px，显示的也是100px，那么如何做到这一点呢？可以通过设置理想视口；
理想视口：设备独立像素所代表的值；
完美适配移动设备的viewport；
所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport（理想视口），也就是第三个viewport——移动设备的理想viewport。
理想视口并没有一个固定的尺寸，不同的设备拥有有不同的理想视口。所有的iphone的理想视口宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等；
