Currently,Twitter Bootstrap 3有以下响应断点: 768px,992px和1200px,分别代表小型,中型和大型设备。
如何使用JavaScript检测这些断点?
我想用JavaScript监听当屏幕改变时触发的所有相关事件。并且能够检测屏幕是用于小型、中型还是大型设备。
有没有什么已经做好的事情?你有什么建议?
发布于 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来做到这一点。
发布于 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
}
});
发布于 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';
}
}
};
});
https://stackoverflow.com/questions/18575582
复制相似问题