求推荐可识别Bootstrap命名规范的窗口尺寸查询网站

• 自制实时检测页面
  你可以快速写一个极简HTML页面实现这个功能，完全无需依赖外部网站。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 断点检测</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-size: 2rem;
            font-family: Arial, sans-serif;
        }
        .badge {
            padding: 1rem 2rem;
            border-radius: 0.5rem;
            color: white;
        }
        .xs { background-color: #dc3545; }
        .sm { background-color: #ffc107; color: #000; }
        .md { background-color: #17a2b8; }
        .lg { background-color: #28a745; }
        .xl { background-color: #007bff; }
        .xxl { background-color: #6f42c1; }
    </style>
</head>
<body>
    <div id="breakpoint-badge" class="badge"></div>

    <script>
        function updateBreakpoint() {
            const badge = document.getElementById('breakpoint-badge');
            const width = window.innerWidth;
            
            if (width < 576) {
                badge.textContent = 'X-Small (<576px)';
                badge.className = 'badge xs';
            } else if (width < 768) {
                badge.textContent = 'Small (≥576px)';
                badge.className = 'badge sm';
            } else if (width < 992) {
                badge.textContent = 'Medium (≥768px)';
                badge.className = 'badge md';
            } else if (width < 1200) {
                badge.textContent = 'Large (≥992px)';
                badge.className = 'badge lg';
            } else if (width < 1400) {
                badge.textContent = 'Extra large (≥1200px)';
                badge.className = 'badge xl';
            } else {
                badge.textContent = 'Extra extra large (≥1400px)';
                badge.className = 'badge xxl';
            }
        }

        window.addEventListener('load', updateBreakpoint);
        window.addEventListener('resize', updateBreakpoint);
    </script>
</body>
</html>

将代码保存为HTML文件，用浏览器打开后，调整窗口宽度就能实时看到对应的Bootstrap断点类别。

• 浏览器开发者工具辅助
  现代浏览器的开发者工具（如Chrome DevTools）开启响应式视图后，会显示当前窗口宽度数值，你可以对照Bootstrap官方断点标准判断类别：
  • X-Small：窗口宽度 < 576px
  • Small：窗口宽度 ≥ 576px
  • Medium：窗口宽度 ≥ 768px
  • Large：窗口宽度 ≥ 992px
  • Extra large：窗口宽度 ≥ 1200px
  • Extra extra large：窗口宽度 ≥ 1400px

内容的提问来源于stack exchange，提问作者Sixthsense