概念：设备像素和CSS像素
设备像素：设备物理屏幕的像素分辨率，使用screen.width/height获取
这里有四个像素100%缩放，CSS像素完全覆盖设备像素
缩小后，CSS像素开始缩小，意味着一个设备像素覆盖多个CSS像素
放大后，CSS像素变大，现在一个CSS像素覆盖多个设置像素
您只对CSS像素感兴趣。正是这些像素决定了样式表的呈现方式
屏幕大小
用户显示器的大小，使用screen.width/height获取，对我们来说这个数据没什么用
屏幕尺寸示例
窗口尺寸
它准确地告诉您用户当前有多少空间可用于CSS布局
使用window.innerWidth/innerHeight获取
窗口大小示例
如果用户放大，窗口中的可用空间就会减少。innerWidth/Height通过减小来反映这一点。
注意，测量的宽度和高度包括滚动条
这里的例外是Opera，它的窗当用户放大时，innerWidth/Height不会减小：它们是以设备像素为单位测量的。这在台式机上很烦人，但在移动设备上却是致命的，我们稍后会看到。
滚动偏移
window.pageXOffset 和 window.pageYOffset，包含文档的水平和垂直滚动偏移
因此，可以得到滚动条偏移了多少，不管在什么缩放状态，测量的也是CSS像素。
滚动偏移示例
概念：视口（viewport）
viewport的功能是约束元素，它是站点最上面的包含块
视口不是HTML结构，所以你不能通过CSS来影响它。它只是有浏览器窗口的宽度和高度-在桌面上。在手机上，情况就复杂多了。
视口宽度示例
测量视口
使用document.documentElement.clientWidth/clientHeight，测量视口，不包含滚动条
document.documentElement其实代表<html>dom元素
虽然是html元素，但是这个属性是一个特例，就是指定html的尺寸，它也是视口尺寸
测量html元素
document.documentElement.offsetWidth/offsetHeight，测量真正的html尺寸
html元素的真正尺寸演示
事件坐标
pageX/Y，以CSS像素表示相对于<html>元素的坐标
clientX/Y，以CSS像素为单位给出相对于视口的坐标
screenX/Y，以设备像素为单位给出相对于屏幕的坐标。
您将在90%的时间使用pageX/Y；通常您想知道事件相对于文档的位置。另外10%的时间您将使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标
媒体查询
您可以定义特殊的CSS规则，这些规则只在页面宽度大于、等于或小于某个大小时执行
width/height，类似于clientWidth/Height，及视口尺寸，是CSS像素
device-width/device-height，类似于screen.width/height，是设置像素
演示
