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()来获取窗口宽度。既然你已经提到，你是新的响应设计，不要设置高度，除非它是非常必要的。将高度设置为自动将使生活更容易的情况下，响应网页开发。

Answer 2

如果您真的想使用JavaScript，那么就使用window.innerWidth。

这是窗口的内部宽度，而document.body.clientWidth可能更小:它取决于主体的宽度。

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