大家好，欢迎来到IT知识分享网。

一、像素

　　设备物理像素：计算机屏幕能显示一种特定颜色的最小区域。任何设备的物理像素的数量都是固定的。

　　CSS单位像素：为web开发者创造的，在CSS和JS中使用的一个抽象的层。

　　css中的1px所代表的设备物理像素是不同的，例如:

　　1、不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640×960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

　　2、用户缩放。当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

二、分辨率

　　1、物理分辨率（DPI，dots per inch）

　　　　每英寸的显像点数。

　　　　dot 可以指半调印刷的墨点，可以指喷墨打印的墨点，可以指扫描仪的采样点，可以指数字图像的最小单位（即 pixel），可以指屏幕的物理像素，可以指操作系统的抽象像素……在不同的语境下可以指不同的概念。

　　　　pixel 也可以指数字图像的数据 pixel，可以指屏幕物理像素，也可以指代操作系统的抽象像素。

　　2、设备像素比（DPR，device pixel ratio）

　　　　设备像素个数 与 理想视口像素单位 的比。

　　　　例如

　　　　早期iphone的设备像素是320物理像素，它们的理想视口也是320 CSS像素，此时DRP设备像素比为1；后来，屏幕宽度变成了640物理像素，理想视口的宽度仍为320 CSS 像素，设备像素比变成了2。

三、视口view-port

　　1、包含块（Containing Block）模型

　　当webkit计算元素的盒子的位置和大小时，它需要计算该元素和另一个矩形区域的相对位置，这个矩形区域被称为元素的包含块。类似块级格式化上下文

　　　　– 根元素的包含块称为初始包含块，大小就是可视区域（viewport）

　　　　–position属性为static或者relative的元素，它们的包含块就是最近祖先的盒模型的内容区域。

　　　　–position属性为fixed，那么该元素的包含块脱离HTML文档，固定在可视区域的特定位置。

　　　　–position 属性为absolute，由最近的含有属性为absolute、relative、或者fiexd的祖先决定。

　　2、宽度的基准

　　每个块级元素的默认宽度都为100%，是以其包含块的宽度为基准的。如：

　　Div的父元素为body，body的父元素为html，他们都没有声明具体的宽度时，就要看html的包含块，即是viewport可视区域（初始包含块）。

　　可以通过给元素声明非常大的宽度来突破这个限制。

　　3、布局视口（layout viewport）

　　对应于初始包含块视口。以CSS px 为单位

　　默认情况下，一个手机或者平板的布局宽度是768-1024像素。

　　在PC端，初始包含块与浏览器可视区域宽度一致。到wap移动端上，浏览器宽度太小，无法和PC同样的方式来布局网页。于是，将布局视口与可视视口分离。

　　4、视觉视口（visual viewport）

　　浏览器的宽度，用户正在看到的网站的区域。可以通过缩放来操作视觉视口，对开发过程并不是很重要。

　　5、理想视口（ideal viewport）

　　 对具体设备来说最理想的布局视口尺寸。CSS 单位.

　　比如，早期iphone的理想视口为320*480px，iphone5升级为320*568px。

四、Meta标签　

　　Viewport meta是由苹果发明的，主要目的是让布局视口的尺寸和理想视口的尺寸匹配。

　　<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

　　在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

　　将width设为device-width，理想的值与设备宽度相等CSS单位

　　可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

　　<meta name=”viewport” content=”initial-scale=1″>

　　这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。