通常我在开发一个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相匹配的跨度才会显示相关文字。
你可以通过添加其他书签来进一步显示其他信息。例如,沿着屏幕底部显示网格列的边界。