视口（viewport）原理详解之第一部分

　　在这篇文章中，我将解释viewports和元素width是如何工作的，比如html元素、  window和 screen。

　　这篇文章主要针对桌面浏览器，但它的部分和移动设备中的结论也比较类似，所以也是为下篇移动端viewports详解做准备。

一、设备像素和CSS像素

　　设备像素提供了我们操作设备的一个正规的分辨率，可以用screen.width/height获得。

　　如果你给某个元素宽度设为128px,设备宽度1024px,默认浏览器最大化，这事，元素将占据屏幕宽度的1/8。如果用户缩放，那么这个比例将会变化。如果用户放大到200%，这个128px的元素将占据屏幕的1/4。

　　在移动设备中进行缩放不过是拉伸或者压缩像素。元素宽度不会从128px变为256px，而是元素的每个像素在屏幕上的长、宽均放大了2倍，整体面积扩大了4倍。实际上，元素宽度还是128px，虽然他实际占据了256px的屏幕大小。

　　我们下面用图片来解释一下：

1.CSS像素完全覆盖设备像素

2.缩小，CSS像素占不满设备元素

3.放大，1css像素占据多个设备像素

　　说了这么多，其实我们只需要关心CSS像素即可，只有这些才会影响我们样式表的渲染。在用户缩放或者拉伸时，浏览器会自动的拉伸或者缩放你的网页布局。

二、屏幕尺寸

　　我们可以利用screen.width和screen.height来获取屏幕宽高，这些指标是衡量一个显示屏而不是浏览器的数据，所以，实际上对我们并没什么用处。

三、窗口大小

　　相反来说，浏览器窗口的尺寸对我们就非常的重要了，它能告诉我们有多少空间能被我们用来CSS布局。我们可以利用window.innerWidth 和window.innerHeight获得。

　　当用户缩小窗口时，window.innerWidth 和window.innerHeight也会做相应减少。

　　注意，这一尺寸包含了滚动条的尺寸。

四、滚动距离

　　window.pageXOffset和window.pageYOffset分别代表了文档横向和纵向的滚动距离，因此，你乐意获取用户滚动的距离。

　　理论上，如果使用至向上滚动页面然后缩小，window.pageX/Y会改变。但是浏览器为了保持最上方元素不变，window.pageX/Y实际不会变化。

五、视口概念

　　viewport功能就是包下html元素，也就是网站的最外层容器。

　　假设你有一个width为10%的侧边栏，当用户改变浏览器大小时，侧边栏会相应变大或缩小。它到底问什么会这样呢？侧边栏拥有父元素宽度的10%，我们假设他的父元素就是body，那么body宽度是多少呢。所有块级元素都会占据父级的全部宽度，那么body宽度应该等于html宽度，而html宽度呢？

　　理论上，html的宽度占据viewport的100%,viewport宽高等于浏览器窗口的大小。

六、获取veiwport宽高

　　document.documentElement.clientWidth和-Height。

　　window.innerWidth/Height也能获取时候宽高，但window.innerWidth/Height包含滚动条，而ocument.documentElement.clientWidth和-Height不包含。

 七、获取html元素宽高

　　document.documentElement.offsetWidth和-Height。

八、媒体查询

div.sidebar {
    width: 300px;
}

@media all and (max-width: 400px) {
    // styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }

}

　　这里的300px相对于谁呢？

　　有两种媒体查询方式：width/height 和 device-width/device-height。

1.width/height是相对于documentElement .clientWidth/Height

2.device-width/device-height相对于screen.width/height