在本系列文章中，我将解释视口和重要元素的宽度是如何工作的，例如元素、window和scrren的宽度。这篇文章是关于桌面浏览器的，为引入移动浏览器做准备。大多数Web开发人员已经熟悉桌面浏览器的一些概念。我们会在移动浏览器上找到相同的概念，只是稍微复杂一点，回顾这些熟悉的概念将对我们理解移动浏览器有很大帮助。设备像素和CSS像素您需要了解的第一个概念是CSS像素和设备像素之间的区别。设备像素，顾名思义，不管你使用什么设备，设备像素代表的是设备的实际分辨率。可以从screen.width/height读取设备像素。如果你给一个元素宽度：128px，你的显示器是1024px宽，你最大化你的浏览器，这个元素可以在屏幕上平铺8次。（可能；忽略一些不确定性）如果用户缩放页面，这个值会改变。如果用户将浏览器缩放到200%，您的128px元素只能在屏幕上平铺4次。用户缩放是通过拉伸像素在浏览器中实现的。也就是说，不是将元素的宽度从128px更改为256px，而是将像素大小加倍。综上所述，这个元素还是有128px的css像素，但是此时占用了256px的设备像素。换句话说，缩放到200%会使css像素大小成为设备像素大小的4倍。（两倍宽，两倍高）。下面的图片可以清楚地说明这个概念。第一个缩放到100%，没什么可看的。css像素完全覆盖了设备像素。现在我们缩小页面。css像素开始缩小，这意味着一个设备像素可以覆盖多个css像素。如果放大，则会发生相反的情况。css像素开始变大，现在一个css像素可以覆盖多个设备像素。关键是你只需要和csspixel相关，它决定了你的style是如何渲染的。设备像素对你来说几乎没用。不适合用户，用户会缩放页面直到页面看起来舒服为止。但是这个缩放比例对你来说并不重要，浏览器会根据缩放比例自动缩小或放大你的css像素。100%缩放我上面提到的示例假定100%缩放。现在您可以更严格地定义它：在100%缩放的情况下，css像素和设备像素严格相等。这个100%scaling的概念在我们的讲解中非常有用，但是在日常开发中我们不需要太担心这个。在桌面浏览器开发中，您通常会放大到100%。即使用户缩放页面，css像素的原理也能保证你的布局保持比例，不会被打乱。屏幕尺寸让我们来看看实际尺寸。我们从screen.width和screen.height开始。它们代表用户屏幕的总宽度和总高度。它们的单位是设备像素，因为它们永远不会改变：它们是显示器的特性，而不是浏览器的特性。有趣的！但是我们可以用这些信息做什么呢？基本没用。用户显示器的大小对我们来说并不重要，除非你要做一个web数据数据库。WindowSize相反，您关心的是浏览器窗口的内部大小。这将告诉您有多少空间可用于显示您的css布局。可以通过window.innerWidth和window.innerHeight获取。显然，窗口内部宽度的单位是css像素。你需要知道的是你的css布局有多少可以在浏览器窗口中渲染，这个渲染量会随着用户在页面上的放大而减少（css像素越大，渲染的内容越少）。因此，如果用户在页面上放大，可用空间就会减少，并且window.innerWidth/Height会反映在减小的值中。注意！此宽度和高度包括滚动条。滚动条也被认为是浏览器窗口的一部分。（这个有历史原因）Scrollingoffsetwindow.pageXOffset和window.pageYOffset代表文档的水平和垂直滚动偏移量。通过这两个属性，就可以知道用户滚动到哪里了。这两个属性的单位也是CSS像素。理论上，如果用户向上滚动然后放大，window.pageX/YOffset应该改变。但是浏览器做了一些处理，当用户缩放时，浏览器试图将相同的元素保持在浏览器窗口的顶部，这样页面看起来就不会跳动。这意味着当用户缩放时window.pageX/YOffset不会改变：滚动出屏幕的css像素数不会改变。概念：视口在继续介绍更多js属性之前，我们必须介绍另一个概念：视口。视口的作用是限制元素，它是网站的顶级块级元素。这听起来可能有点含糊，让我们举一个实际的例子。假设你有一个流畅的布局，你的侧边栏是width:10%。当您调整浏览器大小时，边栏会相应地增大和缩小。那么它究竟是如何工作的呢？从技术上讲，当侧边栏占据其父元素宽度的10%时会发生什么。我们假设
元素是父元素。所以现在问题变成了元素的宽度是多少（你没有给一个宽度）。一般来说，所有块级元素的宽度都是父元素宽度的100%。所以元素与其父元素一样宽。元素现在的宽度是多少？为什么它和浏览器一样宽。这也是为什么width:10%的侧边栏占整个浏览器宽度的10%。所有Web开发人员都知道这个事实。您可能不知道这是如何工作的。理论上，html元素的宽度受限于视口的宽度。html元素等于视口的宽度。视口相当于浏览器窗口：这就是它的定义方式。viewport不是HTML结构，所以你不能用css影响它。它只有浏览器窗口（桌面）的宽度和高度；在移动浏览器上，它更复杂。事实证明，这些东西有时会产生一些奇怪的结果。你可以去这个网站（http://www.quirksmode.org/mob....滚动到最上面，然后放大2、3倍让页面内容溢出浏览器窗口。现在一直滚动到右边，你会看到顶部的蓝色条不再正确排列。这种行为是由视口定义的方式引起的。我给蓝色顶部条设置了一个宽度：100%。100%的什么？100%html元素的。元素和视口是等宽的，所以和浏览器窗口等宽。重点是：100%缩放时正常，现在我们放大页面，导致视口变得小于我们页面的总宽度。这本身无所谓，页面内容溢出html元素，但html元素是[溢出](http://www.quirksmode.org/css/overflow.html):visible,意思是beyond元素会显示出来。但是蓝色的topbar没有溢出，我给了它width:100%，浏览器就会给它viewport的宽度。他们不在乎现在宽度太小了。文档宽度？我真正想知道的是包括悬垂在内的页面内容的总宽度是多少。据我所知，浏览器不提供这个值。我开始相信我们需要一个js属性对来表示我称之为“文档宽度”的值。如果我们真的觉得这么难受，为什么不把文档宽度的值暴露给css呢？我希望蓝色顶部栏继承文档宽度，而不是html元素的宽度。（这真的很棘手，如果不可能，我也不会感到惊讶）浏览器供应商，你们对此有何看法？viewportsize你可能想知道视口的大小。它们可以通过document.documentElement.clientWidth/clientHeight获得。如果了解DOM结构，就会知道document.documentElement实际上是元素：文档的根元素。然而，视口更高一级，可以说它是包含元素的元素。如果你给元素一个宽度（不推荐，但可能），它变得更加重要。即使在这种情况下，document.documentElement.clientWidth/clientHeight仍然给出视口的大小，而不是html的大小。（这是一种特殊情况，仅适用于此元素和此属性对。在其他情况下，clientWidth/clientHeight取元素的实际大小）。所以document.documentElement.clientWidth/clientHeight总是给出视口的大小，而不管html的大小。两对属性值，那么视口的大小也可以由window.innerWidth/Height给定。答案是肯定的，也不是。这两对属性值唯一的区别是window.innerWidth/Height包含滚动条的宽度，而document.documentElement.clientWidth/clientHeight不包含。我们有两对属性的原因是浏览器大战的产物。当时Netscape只支持window.innerWidth/Height，而IE只支持document.documentElement.clientWidth/clientHeight。当所有其他浏览器都开始支持document.documentElement.clientWidth/clientHeight时，IE仍然不支持window.innerWidth/Height。拥有两个属性对在桌面浏览器上很烦人，但在移动浏览器上却是一个福音。html元素document.documentElement.clientWidth/clientHeight的尺寸在所有情况下都是给定的视口尺寸。那么我们从哪里获取html元素本身的宽高呢？它们存储在document.documentElement.offsetWidth/offsetHeight中。这两个属性实际上为您提供了一个将元素作为块级元素进行访问的接口。如果设置了width或offsetWidth会影响这两个属性。事件坐标有一些事件坐标值。当鼠标事件发生时，会暴露出不少于5对属性值，给你事件的具体位置信息。其中三对对我们的讨论很重要：1.pageX/Y给出相对于html元素的坐标，单位为css像素2.clientX/Y给出相对于视口的坐标，单位为css像素3.screenX/Y给出相对于屏幕的坐标在设备像素pageX/YclientX/YscreenX/Y中，您将有90%的时间使用pageX/Y；通常您想知道相对于文档的位置。另外10%你想使用clientX/Y。您基本上不需要知道相对于屏幕的大小。媒体查询最后，一些媒体查询。思路很简单：可以指定不同的css在不同的情况下在页面上运行，比如当页面宽度大于、等于或小于某个尺寸时。div.sidebar{width:30%;}@mediaalland(max-width:400px){//宽度小于400px时分配的样式；div.sidebar{宽度：100px；}}现在这个侧边栏在宽度大于400px时宽度为300px，小于等于400px时宽度为100px；问题是哪个宽度与400px相比？有两个相关的媒体查询：width/height和device-width/device-height。1.`width/height`使用`documentElement.clientWidth/height`（即视口）。单位是css像素。2.`device-width/device-height`使用`screen.width/height`。单位是设备像素。应该使用哪个宽度？想都不要想，当然是宽度。Web开发人员对设备宽度不感兴趣，只对浏览器窗口的宽度感兴趣。在桌面浏览器上使用宽度而忘记设备宽度。正如我们所见，这在移动设备上更为复杂。总结这篇文章总结了我们对桌面浏览器的探索。第二篇文章将介绍这些概念在移动浏览器上的应用，并着重介绍与桌面浏览器的区别。博客地址