自动检测并显示任何站点的活动断点和视口宽度。
CSS 断点按钮将当前断点和视口宽度放置在页面本身上，作为一个可拖动的小徽章，其颜色与您所在的层相匹配。
在大多数网站上，无需进行任何设置。该扩展根据其样式表计算出页面布局实际更改的宽度，忽略不是真正断点的一次性宽度，因此您不必知道站点使用哪个框架或是否保留该框架的默认值。当它识别出 Bootstrap、Tailwind 或 Foundation 规模时，它会使用该框架自己的名称来标记各层；任何自定义的内容都会保留其真实宽度，而不是您猜测的默认宽度。
当您需要时，您仍然可以将网站固定为固定比例。 Bootstrap 和 Tailwind 规则集是预先打包的，编辑器涵盖了其他所有内容：命名断点、设置其最大宽度、选择每层的颜色以及在您键入时更新比例预览。可以将检测到的一组断点复制到可编辑规则中作为起点。
弹出窗口是活动选项卡的实时读数。它将选定的规则集呈现为彩色刻度，显示每个断点的名称和最大宽度，突出显示选项卡当前所在的层，并显示精确的宽度（以像素为单位）。
设置是针对每个站点的，因此 Bootstrap 项目和 Tailwind 项目可以位于相邻的选项卡中，每个选项卡上都会显示正确的断点。徽章可以放置在任何角落或拖动到页面上的任何位置，并且设计了浅色和深色主题。该扩展程序不收集任何数据。