移动端响应式相关概念

CSS像素(CSS pixels)

定义

CSS像素是虚拟像素，可以理解为直觉像素，CSS和JS中使用的抽象单位，浏览器内的长度都是以CSS像素为单位的，CSS像素的单位是px。

注意

在CSS规范中，长度单位可以分为两类，绝对单位以及相对单位。px是一个相对单位，相对的是设备像素(device pixel)。在没有缩放的情况下，1个CSS像素等同于一个设备独立像素。

在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的。

在不同的设备之间，每1个CSS像素所代表的物理像素是可以变化的。

CSS像素在视觉上是很容易改变大小的，比如缩放浏览器页面，就是改变的CSS像素，当放大一倍，那么一个CSS像素在横向或者纵向上会覆盖两个设备独立像素。例如宽度100px像素，当页面放大一倍，它会在横向上由原本占据100个设备独立像素，变成占据200个设备独立像素；如果缩小，则恰好相反，只能占据50个设备独立像素。

页面的缩放系数 = CSS像素 / 设备独立像素

px

px实际是pixel（像素）的缩写，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！

不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi：

• ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
• dpi：每英寸多少点。

当用于描述显示器设备时ppi与dpi是同一个概念 。

设备像素(device pixels，DP)

定义

设备像素也被称作物理像素，顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，此像素是设备的固有属性，也就是说，从出厂的那一刻，设备像素已经固定，不会再发生改变。单位pt。

注意

pt在CSS单位中属于真正的绝对单位，1pt = 1/72(英寸)，而1英寸等于2.54厘米。

通常使用分辨率来描述设备像素，例如1920*1080，表示设备横向有1920个像素点，纵向有1080个像素点。

设备像素比(device pixel ratio，DPR)

设备像素比描述的是未缩放状态下，设备像素和设备独立像素的比例关系。

在JS中可以通过window.devicePixelRatio获取。

在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配。

DPR = 设备像素 / 设备独立像素

当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

设备独立像素(Device independent Pixel，DIP)

设备独立像素，也称为逻辑像素，简称DIP。

由来

从 iphone4 开始，苹果公司推出了 Retina 屏，物理像素变成640 * 960，但是屏幕尺寸没有变化，也就是说单位面积上的物理像素的数量增加了，或者说屏幕密度增加了。如果还按照原来那样，1pxCSS 像素由 1 个物理像素来渲染， 那么width: 320px的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页，在 iphone4 上只会占一半的屏幕，同时font-size: 20px的字体在 iphone4 上的尺寸也会缩小。

为了让同一个网页在 iphone4 和 iphone3 上的有相同的显示效果，引入了独立像素的概念。iphone4 的独立像素为320 * 480，是 iphone4 的物理像素的一半，和 iphone3 的物理像素一样。也就是说，iphone4 上的 1 个独立像素 = 2 个物理像素。在 iphone4 上，在不缩放的前提下，CSS 中的1px便由 1 个独立像素来渲染，相当于 2 个物理像素。这样，width: 320px的元素由 320 个独立像素来渲染，也就是由 640 个物理像素来渲染，正好占满 iphopn4 的屏幕宽度。font-size: 20px的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在 iphone4 上的字体更清楚。

与CSS像素的关系

在没有缩放的情况下，1个CSS像素等同于一个设备独立像素。

CSS像素 = 设备独立像素

因此DPR也可以用设备独立像素计算得出。

DPR = 设备像素 / CSS像素(或设备独立像素)

PPI(pixels per inch)

定义

每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

PPI的计算

已知屏幕分辨率和主对角线的尺寸，以iphone 6为例：

var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 
var ppi = 斜边尺寸/5.5 
ppi = 401ppi

ppi越高，每英寸像素点越多，图像越清晰；我们可以类比物体的密度，密度越大，单位体积的质量就越大，ppi越高，单位面积的像素越多。

视口(viewport)

移动设备上有三个viewport：布局视口、视觉视口和理想视口。

layout viewport（布局视口）

layout viewport指的是我们可以进行网页布局区域的大小，以CSS像素做计量单位。移动设备默认会设置一个较大的viewport（如IOS一般默认是980px），layout viewport的宽度是大于浏览器可视区域的宽度的。

layout viewport的宽度可以通过document.documentElement.clientWidth来获取。

document.documentElement.clientWidth
document.documentElement.clientHeight

visual viewport （视觉视口）

visual viewport指的是浏览器可视区域的大小。
visual viewport的宽度可以通过window.innerWidth来获取。

window.innerWidth
window.innerHeight

ideal viewport（理想视口）

ideal viewport是一个能完美适配移动设备的viewport。无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。理想视口与设备的宽度一致，例如iphone8的理想视口是375px。

ideal viewport的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。

window.screen.width
window.screen.Height

利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。要得到ideal viewport就需要用到meta标签。

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

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

属性	描述
width	设置layout viewport的宽度，为一个整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport的高度，这个属性很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes"

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

把当前的viewport宽度设置为ideal viewport的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为device-width这个特殊的值就行了。

<meta name="viewport" content="width=device-width">

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

<meta name="viewport" content="initial-scale=1">

这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为ideal 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宽度为准。所以，最完美的写法应该是，两者都写上去，这样就initial-scale=1解决了iphone、ipad的毛病，width=device-width则解决了IE的毛病。

<meta name="viewport" content="width=device-width, initial-scale=1">

打赏