@fengfeng 2014-09-19T03:04:24.000000Z 字数 2237 阅读 1313

viewport sumup

viewport

from

屏幕尺寸 screen.width/height

意义：用户屏幕的整体大小。
度量单位：设备像素。
浏览器错误：IE8以CSS像素对其进行度量，IE7和IE8模式下都有这个问题。

它们包括用户屏幕( 显示器的宽高)的整个宽度和高度。它们的尺寸是以设备像素来进行度量的，因为它们永远不会变：它们是显示器的属性，而不是浏览器的。

窗口尺寸 window.innerWidth/Height

意义：浏览器窗口的整体大小，包括滚动条。
度量单位：CSS像素。
浏览器错误：IE7不支持。Opera以设备像素进行度量。

相反，你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidth和window.innerHeight来获取这些尺寸

滚动距离 window.pageX/YOffset

意义：页面滚动的距离。
度量单位：CSS像素。
浏览器错误：无。

window.pageXOffset和window.pageYOffset，包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离

viewport

viewport的功能是用来约束你网站中最顶级包含块元素（containing block）的。

度量viewport document.documentElement.clientWidth/Height

意义：Viewport尺寸。
度量单位：CSS像素。
浏览器错误：无。

你可能想知道viewport的尺寸。它们可以通过document.documentElement.clientWidth和-Height得到。

度量元素本身的尺寸 document.documentElement.offsetWidth/Height

意义：元素（也就是页面）的尺寸。
度量单位：CSS像素。
浏览器错误：IE度量的是viewport，而不是元素。

所以clientWidth/Height在所有情况下都提供viewport的尺寸。但是我们去哪里获取元素本身的尺寸呢？它们存储在document.documentElement.offsetWidth和-Height之中。
这些属性可以使你以块级元素的形式访问元素；如果你设置width，那么offsetWidth将会表示它。

@media width

width/height和device-width/device-height
1. width/height使用和documentElement .clientWidth/Height（换句话说就是viewport宽高）一样的值。它是工作在CSS像素下的。

device-width/device-height使用和screen.width/height（换句话说就是屏幕的宽高）一样的值。它工作在设备像素下面。

== 你应该使用哪个？这还用想？当然是width。Web开发者对设备宽度不感兴趣；这个是浏览器窗口的宽度。
所以在桌面环境下去使用width而去忘记device-width吧.

事件中的坐标

pageX/Y, clientX/Y, screenX/Y

pageX/Y提供了相对于元素的以CSS像素度量的坐标。
clientX/Y提供了相对于viewport(视窗)的以CSS像素度量的坐标。
screenX/Y提供了相对于屏幕(电脑显示屏幕)的以设备像素进行度量的坐标。

== 90%的时间你将会使用pageX/Y；通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。

概念：设备像素和CSS像素

你需要明白的第一个概念是CSS像素，以及它和设备像素的区别。

设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率，并且其值可以（通常情况下）从screen.width/height属性中读出。

如果你给一个元素设置了width: 128px的属性，并且你的显示器是1024px宽，当你最大化你的浏览器屏幕，这个元素将会在你的显示器上重复显示8次（大概是这样；我们先忽略那些微妙的地方）。

如果用户进行缩放，那么计算方式将会发生变化。如果用户放大到200%，那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以，元素的宽度并没有从128个像素被修改为256个像素；相反是实际像素被放大了两倍。形式上，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间。

换句话说，放大到200%使一个CSS像素变成为一个设备像素的四倍。（宽度2倍，高度2倍，总共4倍）

一些配图可以解释清楚这个概念。这儿有四个100%缩放比的元素。这儿没有什么值得看的；CSS像素与设备像素完全重叠。

Alt text

现在让我们缩小。CSS像素开始收缩，这意味着现在一个设备像素覆盖了多个CSS像素。