# 1、什么叫像素（pixel）？
是指由一个数字序列表示的图像中的一个最小单位。 像素是整个图像中不可分割的单位或者是元素。以一个单一颜色的小格存在。
不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距；打印机上的物理像素等于打印机的墨点。衡量点距大小和打印机墨点大小的单位分别是ppi和dpi。
ppi:每英寸多少像素数(pixel per inch),在显示器上说的就是每英寸多少物理像素及显示器设备的点距。更准确来说应该是像素密度，衡量单位物理面积内拥有像素的情况。dpi:每英寸多少点(dot per inch)。
当用于描述显示器设备时ppi和dpi是同一个概念。
CSS像素
css像素是一个视角单位，基本单位是px。为了方便，基本上是根据设备像素来换算的，浏览器根据硬件设备能够直接获取css像素。
默认情况下，一个css像素是等于一个物理像素的宽度的，但是浏览器的放大或缩小操作会使的css像素不等于设备像素值。
设备像素(Device Pixel)
设备像素又称为（物理像素），显示屏幕是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像。物理像素从它出厂的那一天起，物理像素点就固定不变了，单位是pt。
pt在css单位中属于真正的绝对单位，1pt=1/72(inch) 1inch=2.54cm。我们通常所说的显示器分辨率，是指桌面设定的分辨率，而不是显示器的分辨率。
设备像素与css像素的比值称为设备像素比（dpr）。dpr=设备像素/CSS像素，也有dpr=设备像素/设备独立像素。dpr为2时表示一个css像素相当于两个物理像素。所以在
设备独立像素（Device Independent Pixel）
设备独立像素也称为设备逻辑像素，简称dip。设备独立像素与css像素之间的关系如下：
CSS像素=设备独立像素=设备逻辑像素。
# 2、什么叫分辨率？
经常听到分辨率这个词，分辨率又是以像素为单位的。分辨率指的是宽度上和高度上最多能显示的物理像素点个数。指的是块屏幕的像素尺寸。750X1334指的是横向有750个像素，纵向有1334个像素。屏幕尺寸指的是设备对角线的长度。
# 3、什么是视口单位（Viewport units）?
在pc端指的是浏览器的可视区域；在移动端较为复杂，涉及到三个视口：分别是布局视口（Layout Viewport）、视觉视口（Visual Viewport）、理想视口（Ideal Viewport）。
根据CSS3规范，视口单位主要有以下4个：
vw:1vw等于视口宽度的1%。vh:1vh等于视口高度的1%。vmin:选取vw和vh中最小的那个。vmax:选取vm和vh中最大的那个。
# 3.1、布局视口
一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题。所以pc上的网页基本上能在手机上呈现。其宽度大于浏览器的可视区域的宽度。移动设备默认的 viewport 是 layout viewport。通过document.documentElement.clientWidth 来获取。
# 3.2、视觉视口
指用户当前看到的区域，用户可以通过缩放来操作视觉视口，同时还不会影响布局视口。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC8中无法正确获取。
# 33、理想视口
布局视口的默认宽度并不是一个理想的宽度。显示在理想视口中的网站具有最理想的宽度，用户无需进行手动缩放缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。显示的文字的大小也合适。ideal viewport的宽度等于移动设备的屏幕宽度。
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。如若需要用理想视口，需要在head标签中添加一个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
可以使布局视口与理想视口的宽度一致，让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放 ，scale也是相对于理想视口进行缩放的-->
注意： 要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。
当前缩放值 = ideal viewport宽度 / visual viewport宽度。
在DPR为2的屏幕上，显示的却是200%，1个css相当于2个物理像素。此时ideal viewport宽度visual viewport宽度。
把DPR为2的initial-scale=0.5这样设置，这样宽度750px在两种屏幕下宽度都是100%显示。
参考文献
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport (opens new window)