Currently , Twitter Bootstrap 3 有以下响应断点:768px、992px 和 1200px,分别代表小型、中型和大型设备。
如何使用 JavaScript 检测这些断点?
我想用 JavaScript 监听屏幕变化时触发的所有相关事件。并能够检测屏幕是适用于小型、中型还是大型设备。
有没有已经完成的事情?你有什么建议?
最佳答案
编辑:这个库现在可以通过 Bower 和 NPM 获得。有关详细信息,请参阅 github 存储库。
更新的答案:
- 实例:CodePen
- 最新版本:Github repository
- 不喜欢 Bootstrap?检查:Foundation demo和 Custom framework演示
- 有问题吗? Open an issue
免责声明:我是作者。
以下是您可以使用最新版本(Responsive Bootstrap Toolkit 2.5.0)执行的一些操作:
// Wrap everything in an IIFE
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);
从版本 2.3.0 开始,您不需要这四个 <div>
下面提到的元素。
原始答案:
我认为您不需要为此使用任何庞大的脚本或库。这是一个相当简单的任务。
在 </body>
之前插入以下元素:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
这 4 个 div 允许您检查当前事件的断点。为了简单的 JS 检测,使用以下函数:
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}
现在仅在您可以使用的最小断点上执行特定操作:
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
在 DOM 就绪后检测更改也相当简单。您只需要一个像这样的轻量级窗口调整大小监听器:
var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();
var fullDateString = new Date();
一旦你配备了它,你就可以开始监听变化并执行特定于断点的函数,如下所示:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
}, 300, fullDateString.getTime())
});
关于javascript - 如何使用 JavaScript 检测 Twitter Bootstrap 3 的响应断点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18575582/