通常我在开发一个web应用，需要响应的时候，我都会使用Bootstrap CSS框架，Bootstrap对于开发响应式的web应用是非常好的。在开发了很多页面之后，我发现我经常要琢磨一个页面在每一个媒体查询下会是什么样子，这很快就变成了一种痛苦。
你通常会通过在周围有几个不同的设备来做到这一点（这总是值得在尽可能多的设备上测试你的应用程序，但不是每分钟都在测试），或者使用浏览器调试器（当我开始响应式开发时，设备模式测试功能还没有出现）。
是否有办法在我的页面上显示当前的活动媒体查询，与网站分开？
即会显示。 XS, SM, MD, LG
是的，有一个简单的方法，它可以用在任何使用Bootstrap并且也有JQuery的页面上，而且不需要改变服务器端的实际页面。
你可以通过创建一个 bookmarklet (参考文献：/en.wikipedia.orgwikiBookmarklet) https:/en.wikipedia.orgwikiBookmarklet）。).
A bookmarklet 是一个简单的书签，它的URL里有javascript代码。
创建一个新的书签，并把它的名字设置成容易记忆的东西：比如。Bootstrap Info
然后把它的URL设置为下面的JQuery行之一--这取决于bootstrap的版本，但你可以为每个版本设置一个书签。
对于 Bootstrap 3 用这个，作为URL。
javascript: $("body").append("<div style='position: fixed; bottom:0px; left:0px; width:42px; height:37px; background-color:AntiqueWhite; border:2px solid gray;'><span class='visible-xs text-center' style='font-weight:900; font-size:18pt;'>XS</span><span class='visible-sm text-center' style='font-weight:900; font-size:18pt;'>SM</span><span class='visible-md text-center' style='font-weight:900; font-size:18pt;'>MD</span><span class='visible-lg text-center' style='font-weight:900; font-size:18pt;'>LG</span></div>");
而对于 Bootstrap 4 使用这个。
javascript: $("body").append("<div style='position: fixed; bottom:0px; left:0px; width:42px; height:37px; background-color:AntiqueWhite; border:2px solid gray;'><span class='d-block d-sm-none text-center' style='font-weight:900; font-size:18pt;'>XS</span><span class='d-none d-sm-block d-md-none text-center' style='font-weight:900; font-size:18pt;'>SM</span><span class='d-none d-md-block d-lg-none text-center' style='font-weight:900; font-size:18pt;'>MD</span><span class='d-none d-lg-block d-xl-none text-center' style='font-weight:900; font-size:18pt;'>LG</span><span class='d-none d-xl-block text-center' style='font-weight:900; font-size:18pt;'>XL</span></div>");
然后当你导航到一个使用bootstrap和JQuery的页面时，运行你的 bookmarklet 选择它，就像选择任何书签一样。
现在，一个小的指示器将出现在窗口的左下角，向您显示当前的媒体查询是什么。
现在，如果您调整浏览器窗口的大小，当您在不同的媒体查询之间切换时，该指示器将动态变化。使你很容易看到你的页面在每个查询下的样子。
这是通过有少量的html，浮在屏幕上，它使用了bootstrap .NET Framework 2.0中的bootstrap类。visible-xs, visible-sm, visible-md, visible-lg 中的bootstrap 3类（和 d-block d-sm-none 等...，对于bootstrap 4)。因此，只有与当前媒体查询CSS相匹配的跨度才会显示相关文字。
你可以通过添加其他书签来进一步显示其他信息。例如，沿着屏幕底部显示网格列的边界。