如何获取当前 CSS 媒体参数值？答案

【问题标题】：How to get current CSS media parameter values?如何获取当前 CSS 媒体参数值？
【发布时间】：2015-08-27 22:30:16
【问题描述】：

我正在尝试通过编辑样式面板中的 @media 行来使用 Chrome 开发人员工具调试媒体查询。但这太费力了。

我正在寻找的是：

有没有办法运行 jQuery 命令或其他工具来获取这些值？

任何关于调试媒体查询的搜索都会在一个特定页面或手工调试（编辑此、查看那个等）或诸如$('body').width() 之类的琐碎内容上找到建议。

【问题讨论】：

你能举一个你想要找到的信息的例子吗？不清楚你的意思。
@TylerH 编辑了一下
这并不能完全回答您的问题，但 Firefox 有一个简洁的 responsive design mode (Ctrl-Shift-M)，它可以告诉您确切的视口尺寸，并允许您通过鼠标或键盘调整大小。我发现它对于处理媒体查询断点非常有用。
@Jeremy 是的，我在 Chrome 中使用了相同的方法，但循环仍然有点拖拉：编辑 > 刷新 > 拖动 > 考虑值可能是什么 > 编辑。
@culebrón 很公平；您可以在 Firefox 的样式表编辑器（但不是 DOM 检查器）中编辑断点，这可能会减少一些刷新周期，我猜。可能在 Chrome 中的工作方式相同。

【解决方案1】：

您始终可以从主体获取宽度和高度（使用 JavaScript）并使用这些像素值进行计算。

喜欢（jQuery）：

var screenWidth = $('body').width();

这是一个演示，这可能会对您有所帮助。 http://codepen.io/gabrieleromanato/pen/CuviB

【讨论】：

我不需要宽高，在这里提问太琐碎了。
演示是什么？
这似乎假设像素的物理尺寸将始终相同，并将该比率硬编码到代码中......因为问题是关于确定比率对于运行代码的任何设备，它似乎都非常无用。
millimeters.width = Math.floor(width * 0.264583); 从 W3C 文档中，像素不会直接转换为毫米。它们依赖于设备，而不是常量。
在这里你可以找到一大堆设备，也许也有用。 pieroxy.net/blog/2012/10/18/…。我这边就是这样。