JavaScript： 'document.body.clientWidth' 查询当前浏览器宽度的正确属性？

Question

我是响应式网页设计的新手。

现在使用媒体查询，我为自己制作了这些代码片段，以便在调整大小时将浏览器宽度写入控制台。

(function () { 
  window.addEventListener('resize', function() {
    console.log('Current width : %s', document.body.clientWidth);
  });
})();

我正在尝试做的是获取设置断点的信息。

JavaScript 工作正常。但我不确定我是否在问最佳属性。

因此，向

更有经验的开发人员提问：

我应该查询哪个对象的什么属性来解决任务查找断点？

Answer 1

是的，我们可以使用 document.body.clientWidth 来获取浏览器的整个宽度。它是获取宽度的核心javascript方法，这也可用于获取特定元素。如果你使用的是jQuery，可以尝试使用$（window）.width（）来获取窗口宽度。既然你已经提到你是响应式设计的新手，除非非常必要，否则不要设置高度。将高度设置为自动将使响应式 Web 开发时的生活变得轻松。

Answer 2

如果你真的想使用 JavaScript，那就用 window.innerWidth .

这是窗户的内部宽度，而document.body.clientWidth可以更小：这取决于身体的宽度。

但通常人们使用CSS媒体查询。这更有意义，因为这就是它们存在的原因。因此，如果可以的话，请改用它们。