有什么方法可以找出页面的当前宽度是多少？我正在尝试使用 CSS 媒体查询创建响应式网页。
那么当我调整页面大小的时候，能查出当前页面的宽度是多少吗？
编辑：
所以获得宽度的一种方法是使用开发人员工具，而我发现有用的第二种方法是
$(window).width();
就我而言，我实际上是在寻找第一种方法。
【问题讨论】：
您无法在纯 HTML/CSS 中获取浏览器视图的宽度。但是，您可以使用 Javascript：
var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;
如果您只是想要宽度用于调试目的，您可以在开发者工具中找到浏览器大小。
例如，在 Firefox 上，您可以打开 Developers Tools (Ctrl+Shift+I)，然后使用 Adaptive View 面板（在右侧可用），注意此屏幕截图左上角的真实视口：
【讨论】：
【讨论】：
您可以使用screen.width或screen.height来获取当前屏幕的宽度和高度。
如果你使用 jQuery，你可以使用 jQuery 方法获取窗口或文档的大小：
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
【讨论】：
我不确定您是否需要当前宽度来进行响应式设计。您要做的是告诉浏览器“如果您小于 XXX px”，然后以这种方式显示这部分。
在我看来，最简单的方法是在 body 上添加一个类。这是一个使用 enquire.js 的示例：
enquire.register("screen and (max-width:1100px)", {
match : function() {$('body').addClass('small-screen');},
unmatch : function() {$('body').removeClass('small-screen');}
});
通过这种方式，如果宽度小于 1100 像素，您的页面主体将获得一个“小屏幕”类。您可以轻松地将此类与 CSS 一起使用来进行响应式设计：
.small-screen .menu {
display: none;
}
【讨论】：
Javascript
// set the initial width
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
// on resize
window.addEventListener('resize', function(event){
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";
});
HTML
<h1 id="width"></h1>
【讨论】：
Firefox 现在内置了一个很棒的工具，叫做Responsive Design View。它位于工具菜单 >> Web 开发人员 >> 响应式设计视图下。它允许您重新调整视口的大小，并在您更改视口时显示尺寸。
【讨论】：