Question

Twitter Bootstrap通常使用4种不同的屏幕格式：XS，SM，MD和LG。在开发和测试时，我常常想知道当时使用的是哪一个。

有没有办法在不使用任何开发人员工具的情况下始终知道处理哪种格式？

Answer 1

我用＆＃34; debug＆＃34;写了一个简短的div代码。类。

使用简单的HTML和CSS，您可以显示具有当前屏幕尺寸的div。每个开发人员都应该能够写出来。但我仍然认为我会分享它，也许你没有想过它。

HTML

<div class="debug hidden-xs hidden-sm hidden-md">Size: LG - Large</div>
<div class="debug hidden-xs hidden-sm hidden-lg">Size: MD - Medium</div>
<div class="debug hidden-xs hidden-md hidden-lg">Size: SM - Small</div>
<div class="debug hidden-sm hidden-md hidden-lg">Size: XS - Extra small</div>

CSS

.debug{ width: 100%; position: fixed; bottom: 0; background: #ed2901; color: #FFF; text-align: center; line-height: 20px; }

Answer 2

我对主要答案的小改进。在页面的任何位置添加此HTML片段。

<div style="width:100%;position:fixed;bottom:0px;background: rgba(200,0,0,0.7);
 color:#fff; text-align:center;z-index:1000">
<span class="debug hidden-xs hidden-sm hidden-md">Size: XS SM MD <b>LG</b></span>
<span class="debug hidden-xs hidden-sm hidden-lg">Size: XS SM <b>MD</b> LG</span>
<span class="debug hidden-xs hidden-md hidden-lg">Size: XS <b>SM</b> MD LG</span>
<span class="debug hidden-sm hidden-md hidden-lg">Size: <b>XS</b> SM MD LG</span>
 | ViewportWidth: <span id='viewportwidth'></span>
</div>

<script>
window.addEventListener('resize', function(event){  updateWidthInfo(); });

document.addEventListener('DOMContentLoaded', function(event){  updateWidthInfo(); });

function updateWidthInfo() {
    document.getElementById('viewportwidth').innerHTML = getViewportWidth();
    function getViewportWidth(w) {
        w = w || window;
        if (w.innerWidth != null) return  w.innerWidth;
        var d = w.document;
        if (document.compatMode == "CSS1Compat")   return d.documentElement.clientWidth;
        else return d.body.clientWidth;
    }
}
</script>

这也显示当前的宽度。

如何知道Twitter Bootstrap所处的状态/格式？

2 个答案: