在我们开发或调试响应式设计时，可能非常有用，请参阅指示器以显示应用了@ media-query。即（xs，sm，md或lg）。
我想知道，如何以简单的方式显示引导程序中处于活动状态的@ media-query？
因此，我围绕着使用visible-[xs|sm|md|lg]类的代码片段进行了操作。
另外，我添加了以下额外的CSS，这些CSS还使您可以看到横向和纵向媒体查询的指示器。
.visible-landscape,
.visible-portrait {
display: block;
}
@media (orientation: portrait) {
.visible-landscape {
display: none !important;
}
}
@media (orientation: landscape) {
.visible-portrait {
display: none !important;
}
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style='position:fixed; z-index: 10001; top:0; left: 0; background: black; color: white;'>
<span class="visible-xs">XS</span>
<span class="visible-sm">SM</span>
<span class="visible-md">MD</span>
<span class="visible-lg">LG</span>
<span class='visible-portrait' style="background: red; color: yellow;">OP</span>
<span class='visible-landscape' style="background: red; color: yellow;">OL</span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句