rwdKit是一个用于开发人员的断点检测器，用于检测断点更改，并创建一个调试栏，以在窗口调整大小后显示当前媒体/设备类型和视口大小。

如何使用它:

1.在最新的jQuery库之后下载并插入rwdUtility插件。

<script src="/path/to/cdn/jqueryslim.min.js"></script>
<script src="/path/to/jquery.rwdkit.js"></script>

2.初始化插件以在特定容器或整个文档中生成断点检测器。

$(function(){
  $(document).rwdKit();
});
 
// or
$(function(){
  $('body').rwdKit();
});
 
// or
$(function(){
  $('.container').rwdKit();
});

3.覆盖默认的媒体查询断点。

$(document).rwdKit({
  media: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1400,
  }
});

4.更改断点检测器的位置。默认值：“底部”。

$(document).rwdKit({
  position: 'top'
});

5.决定是否在控制台日志中显示断点更改信息。默认值：false。

$(document).rwdKit({
  console: true
});

6.自定义断点检测器的外观。

$(document).rwdKit({
  color: 'white',
  backgroundColor: 'rgba(14,120,200,.9)',
});

7.强制使用旧的引导断点。False=使用引导5个断点。

$(document).rwdKit({
  bootstrap: false
});

更新日志：

v2.4.2版本（2023-01-14）

• 在iframe中添加左右键

v2.4版本（2022-02-19）

• 添加引导程序5个断点
• 设置bootstrap 5默认版本

v2.3 (2021-05-17)

• 在iframe视图中添加导航断点
• 按的本机更改jquery每个函数
• 修复iframe加载时的错误宽度大小

第2.2版（2021-02-24）

• 更改文件名

v2.1版本（2020-12-06）

• 在输入中添加iframe宽度以精确更改大小
• 固定iframe宽度计算

v2.0版本（2020-11-07）

• 添加F4键以重新加载不带缓存的页面
• 在iframe中添加移动视图
• 添加重新加载按钮
• Bootstrap 4默认参数
• 删除字体大小参数

1.2版（2020-05-11）

• 重命名插件名称
• 修改工具栏的设计

2019-12-08

• v1.1.0:添加了Bootstrap 4选项

 

预览截图

jQuery中 断点检测 rwdKit