如何使用JavaScript检测Twitter Bootstrap 3的响应性断点？
如何使用JavaScript检测Twitter Bootstrap 3的响应性断点？
提问于 2013-09-02 22:33:37
Currently，Twitter Bootstrap 3有以下响应断点: 768px，992px和1200px，分别代表小型，中型和大型设备。
如何使用JavaScript检测这些断点？
我想用JavaScript监听当屏幕改变时触发的所有相关事件。并且能够检测屏幕是用于小型、中型还是大型设备。
有没有什么已经做好的事情？你有什么建议？
回答 19
Stack Overflow用户
发布于 2013-09-02 22:42:35
如果你没有特定的需求，你可以这样做：
if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
}
else {
// do something for huge screens
}编辑:我不明白您为什么要使用另一个js库，因为您可以使用已经包含在Bootstrap项目中的jQuery来做到这一点。
Stack Overflow用户
发布于 2013-09-02 22:43:56
你看过Response.js吗？它就是为这类事情设计的。结合使用Response.band和Response.resize。
Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});Stack Overflow用户
发布于 2015-02-12 17:15:31
您可以使用窗口大小并对断点进行硬编码。使用Angular：
angular
.module('components.responsiveDetection', [])
.factory('ResponsiveDetection', function ($window) {
return {
getBreakpoint: function () {
var w = $window.innerWidth;
if (w < 768) {
return 'xs';
} else if (w < 992) {
return 'sm';
} else if (w < 1200) {
return 'md';
} else {
return 'lg';
}
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18575582
复制相关文章
相似问题