想必大家对移动端像素的概念比较疑惑，总结一下我们经常会听到的几个词。
一、屏幕尺寸
平时我们通常提到手机的尺寸，比如iPhone6是4.7英寸的。手机的屏幕是以英寸为单位的。我们平时使用最多的单位是：毫米、厘米、米。对于英寸并不熟悉，首先我们先来换算一下单位：1英寸（inch）=2.54厘米（cm）。那么，英寸到底表示 的是什么呢？是手机的宽还高？原来英寸代表的意思是：手机屏幕对角线的长度。
常见的屏幕尺寸有：2.4、2.8、3.5、3.7、4.2、5.5、5.6等
二、屏幕分辨率
指在横纵向上的像素点数，单位是px。1px=1个像素点数（注：这里的像素指的是物理设备的1个像素）。
一般以纵向像素 * 横向像素 表示一个手机的分辨率。比如：
1980*1080
在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好了的。只有不同的设备之间，才有像素大小的区别。
这里有人提出一个问题：既然在同一个设备上，像素点数早就设定好了，那电脑上可以调整分辨率是怎么回事？
其实，当我们调整电脑分辨率的时候，无论怎么调，像素点数还是那么多。
入上图我的电脑所示，系统推荐的是1920x1080 px的分辨率，这表示什么意思呢？刚才我们也提到了，微软在这块屏幕上横向设置了1080个像素，竖向设置了1920个像素。无论怎么调整，这个数字是不会变了。那么，为什么我们还能调整分辨率呢？比如我们调整到1336x760，按照定义，横向就是760个像素，竖向就是1336个像素了。其实呢，你把分辨率调成1336x760，系统就会分配给你1336x760有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1920x1080 个色彩块。这些拿来充数的像素块，和真实的像素块放到一起，我们不易察觉。
苹果系列手机分辨率：
| 型号 | 屏幕分辨率 | PPI |
|---|---|---|
| 3GS | 320x480 | 163 |
| 4s | 640x960 | 326 |
| 5c | 640x1136 | 326 |
| 5s | 640x1136 | 326 |
| 6 | 750x1334 | 326 |
| 6+ | 1242x2208~1080x1920 | 401 |
注：屏幕大小和分辨率是没有关系的，屏幕大的分辨率不一定。
我们知道苹果手机是从4s开始火起来的，因为它使用了高清屏。那么什么是高清屏呢？
三、高清屏
高清屏（Retina）的概念，主要是从乔布斯发布的Retina设备开始的，Retina显示屏又叫做视网膜屏。事实上，Retnia这个词更接近于一个营销名词而非技术名次。因为从某种意义上来说，这是苹果为宣传自己的产品所创造出的名词。苹果也的确为这个名词申请了专利。
主要功能：
把更多的像素点压缩至一块屏幕上，具备足够高的物理像素密度从而使人体肉眼无法分辨其中单独像素点的液晶屏。
特点：
- 一种具备超高像素密度的液晶屏。
- 同样大小屏幕上显示的像素点由一个变成多个。
高清屏和普通屏的区别：
- 高清屏（Retain）和普通屏相比，相同区域的物理像素点数，高清屏是普通屏的4倍。
- 高清屏的笔记本电脑色彩保真特点的全面展现
四、屏幕像素密度（PPI）
屏幕像素密度也叫像素密度或屏幕密度
屏幕像素密度，即屏幕上每英寸可以显示的像素点的数量，英文pixels per inch，简称PPI。这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关。他们之间有一个公式：
这个公式真是简单明了，我们还是以iPhone6手机为例，它的尺寸为4.7英寸，分辨率为750px*1334px。套用一下公式计算一下，最后得出的PPI，结果是325.6122832234167，四舍五入326和上面表格的值就一样了。
五、物理像素（device pixels）
物理像素又称设备像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色和亮度，使屏幕显示出不同的图像，屏幕从出厂那天，它的物理像素点就固定不变了，单位pt。它是显示设备中最小的物理部件。
买手机的时候会有nxm`的分辨率，那是屏幕nxm个呈像点。一个点（小方格）为一个物理像素，它是屏幕能显示的最小粒度。
任何设备的物理像素的数量都是固定的，任何一款设备上物理像素的大小是不会改变的。不同设备上物理像素的大小可能不同。
六、css像素
在做web页面的时候，我们经常为一个元素设置大小，比如：
div{
width:200px;
height:200px;
background:pink;
}
那么什么是css像素呢？
css像素是个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）web页面上的内容。它是为web开发者创造的，在css或者JavaScript中使用的一个抽象层。一般情况下，css像素被称为与设备无关像素（device-independent）简称为：DIPS。在一个标准的显示密度下，一个css像素对应一个设备像素（物理像素）。css是一个抽象单位，因为呈像的时候需要在设备上呈像，到底呈现出来是什么样子与一个css像素包含多少个物理像素有关。css像素是浏览器特有的概念。
物理像素与css像素的关系：
如上样式所示：一个width为200px的元素，它占据了200个css像素，但200个css像素占据了多少个物理像素取决于屏幕的特性（是否是高密度，即像素比）和用户的缩放行为。
如果在iPhone的视网膜屏上，视网膜的像素密度是普通屏幕的两倍，这个时候200px个css像素就跨越了400个设备像素。如果用户放大，它将跨越更多的设备元素。
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为1000px，页面上同时有一个500px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
七、设备独立像素
设备独立像素也称为密度无关像素，可以认为是计算机坐标系的一个点，这个点代表可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转化为物理像素。是设备对接css像素的接口，一旦css像素与独立设备像素联系起来（width=device-width）此时像素比才能真正发挥作用。
设备独立像素有什么用？
可以把它看成是设备提供出来的接口，它用来对接应用的一些概念：比如浏览器中的css像素。只有当浏览器厂商对接上独立像素时，浏览器厂商设计的移动端规则才能发挥作用。否则采用默认的规则。
设备独立像素在哪里能看到呢？
我们可以F12打开浏览器，切换到移动端，此时，显示的值就是设备独立像素。
八、位图像素
一个位图像素是栅格图像（比如：png、jpg 、gif）等，最小的数据单元。
一个位图像素对应一个物理像素，图片才能得到完美清晰的展示。
九、设备像素比(DPR)
官方定义：设备物理像素和设备独立像素的比例。英文：device pixels ratio也就是:
device pixels ratio = 物理像素/设备独立像素
可以通过 window.devicePixelRatio 来获取，比如：
console.log(window.devicePixelRatio)
在iPhonex下面结果为：3
这个比值是个具体的数，也就是说在iphoneX中，物理像素 = 3倍设备独立像素。
在iPhone6中就不一样了：如图所示：
占据一块iPhone 6的屏幕需要750x1334个物理像素。
占据一块iPhone 6的屏幕需要375x667个设备独立像素。
也就是说1个设备独立像素=4倍物理像素 （面积）。
所以我们可以简化成下面的表示方法：
设备像素比=一个方向上占满一块屏幕需要的物理像素个数/一个方向上占满屏幕需要的设备独立像素的个数。
当我们写上meta标签后，
width=device-width
使css像素和设备独立像素联系了起来，即css像素等于设备独立像素。在iPhone6下，即：
1css像素=4倍物理像素
10、像素总结
现在我们了解了四个像素分别是：物理像素、css像素、位图像素和设备独立像素。
- 物理像素：是设备呈现出的最小单元
- 位图像素：是图片的最小单元
- css像素是浏览器上的一个抽象单位
- 设备独立像素也是一个抽象的层，是设备提供出来的接口
- 像素比：物理像素/设备独立像素
由于物理像素、设备独立像素，像素比都是设备中的概念，与浏览器没有关系，在设备出厂的时候这些参数都已经固定了。所以在默认情况下，设备独立像素和像素比在web开发中没有意义。
对于web开发来说，我们使用的每一个css和JavaScript定义的像素本质上代表的都是css像素，我们在开发中并不在意一个css像素到底跨越了多少个物理像素。我们将这个依赖于屏幕特性和用户缩放程度的复杂运算交给了浏览器。
11、视口
移动端浏览器厂商面临的问题：
他们如何将数以万计甚至数以亿计的PC端网页完整的呈现在移动端设备上？并且不会出现横向滚动条？
三个viewport的理论：
首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为
viewport
的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的
viewport
太窄，而挤作一团，甚至布局什么的都会乱掉。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为
viewport
太窄而显示错乱，所以这些浏览器就决定默认情况下把
viewport
设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的
viewport
叫做 layout viewport（布局视口）这个
layout viewport
的宽度可以通过
document.documentElement.clientWidth
来获取。
然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个
viewport
来代表 浏览器可视区域的大小，ppk把这个
viewport
叫做 visual viewport （视觉视口）。
visual viewport
的宽度可以通过
window.innerWidth
来获取
现在我们已经有两个
viewport
了：layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的
viewport
。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个
viewport
叫做 ideal viewport（理想视口），也就是第三个
viewport
——移动设备的理想
viewport
。
理想视口
并没有一个固定的尺寸，不同的设备拥有有不同的理想视口。所有的
iphone
的
理想视口
宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在
iphone
中，
css
中的320px就代表
iphone
屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备
ideal viewport
的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。
视口总结：ppk把移动设备上的
viewport
分为 布局视口 、 视觉视口 和 理想视口 三类，其中的
理想视口
是最适合移动设备的
viewport
，理想视口 的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为理想视口 的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。理想视口 的意义在于，无论在何种分辨率的屏幕下，那些针对
理想视口
而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
获取三个视口：
var layout=document.documentElement.clientwidth; //获取布局视口
var visual = window。innerwidth; //获取视觉视口 几乎全部支持
var ideal = screen.width; //有的代表理想视口的宽度，有的代表设备的分辨率
利用meta标签对viewport进行控制
移动设备默认的
viewport
是
layout viewport
，也就是那个比屏幕要宽的
viewport
，但在进行移动设备网站的开发时，我们需要的是
ideal viewport
。那么怎么才能得到
ideal viewport
呢？这就该轮到
meta
标签出场了。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的
head
标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=0">
initial-scale ： 初始缩放的比例
user-scalable：是否允许缩放（no/yes）,默认允许
minimum-scale：允许缩放的最小比例
maximum-scale：允许缩放的最大比例
没有这些指令默认为20%-500%，有这些指令可扩大到10%-100%，安卓webkit 不支持minimum-scale属性（默认缩放范围为25%-400%），ie压根不认识和两个属性。
该
meta
标签的作用是让当前
viewport
的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让
viewport
的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认
viewport
，也就是说会出现横向滚动条。
这个
nam
e为
viewport
的
meta
标签到底有哪些东西呢，又都有什么作用呢？
meta viewport
标签首先是由苹果公司在其
safari
浏览器中引入的，目的就是解决移动设备的
viewport
问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对
meta viewport
的支持，事实也证明这个东西还是非常有用的。
设置理想视口:
要得到
理想视口
就必须把默认的
布局视口
的宽度设为移动设备的屏幕宽度。因为
meta viewport
中的
width
能控制
layout viewport
的宽度，所以我们只需要把
width
设为
width-device
这个特殊的值就行了。
<meta name="viewport" content="width=device-width"> 可以看到通过
width=device-width
，所有浏览器都能把当前的
viewport
宽度变成
理想视口的宽度
，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时
理想视口
的宽度。
<meta name="viewport" content="initial-scale=1">
这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 理想视口。
因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？
要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是1，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了 ideal viewport 吗？事实证明，的确是这样的
但如果
width
和
initial-scale=1
同时出现，并且还出现了冲突呢？比如：
<meta name="viewport" content="width=400, initial-scale=1">
width=400
表示把当前
viewport
的宽度设为
400px
，
initial-scale=1
则表示把当前
viewport
的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当
width=400
，
ideal viewport
的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是
ideal viewport
的宽度
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，：
<meta name="viewport" content="width=device-width, initial-scale=1">
12、适配
等比问题：
没有加name 为viewport的meta标签：
一个相同css像素大小的区域在不同的设备上是等比的；在不同的设备上占据的实际物理像素大小（英寸）是不一样的。
加name为viewport的meta标签：
一个相同css像素大小的区域在不同的设备上是不等比的;在不同的设备上占据的实际物理像素大小（英寸）是一样的。
那么等比是不是一个必须需要的呢？肯定是的。百分之百还原设计稿是在不同的设备上要等比。
通过上面的结论，有的人认为要想实现等比不加meta标签不就可以了吗？但是如果不加meta标签，字体什么的就会不清晰。文字要完美清晰的展示需要加上meta标签。但是问题是：加上meta标签就不等比了，所以这就是我们要做的适配，加上meta标签后也要等比。百分之百还原设计图，让你的网页在不同的设备上等比这就是
适配
。我们常见的适配方案有：百分比适配，rem适配和viewport适配。
（1）rem适配
rem：是一个单位，相对于根元素HTML中font-size的大小
html{
font-size: 40px;
}
#box{
width: 10rem; //box的宽为 40*10=400
height:300px;
background: pink;
/* font-size: 20px; */
}
rem适配代码：
//获取布局视口的大小
//var html=document.querySelector("html");
//html.style.fontSize = document.documentElement.clientWidth/10+"px";
(function(){
var styleNode=document.createElement("style");
var w=document.documentElement.clientWidth/10;
styleNode.innerHTML="html{font-size:"+w+"px!important;}";
document.head.appendChild(styleNode);
})()
rem适配原理
：改变了一个元素在不同设备上占据的css像素个数
优点：没有破坏完美视口
缺点：px值到rem转化太复杂
（2）视口适配
//将所有设备布局视口的宽度调整为设计图的宽度
/*var targetW = 640;
var scale = screen.width/targetW;
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
document.head.appendChild(meta);*/
//viewport
/*viewport适配的原理：
viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的*/
/*viewport适配的优缺点：
优点:所量即所得
缺点:没有使用完美视口*/
(function(){
var targetW = 640;
var scale = document.documentElement.clientWidth/targetW;
var meta = document.querySelector("meta[name='viewport']");
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
})()
（3）百分比适配
百分比适配相对比较简单。
高度设置百分比的条件：
所有父级元素必须有高度； 必须是块级元素，行内元素不起作用； ie9 以下 使用 position:ralative 的块级 元素使用 高度百分比是无效的。 响应式布局： 简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间 （如果高度不能设置百分比的时候 可以把已经设置的margin，padding 设置成百分比的形式，预留出呗被压缩的空间） —— 相对比较适用于内容需要一屏展示。