Bootstrap栅格系统 显示当前屏幕大小和种类

bootstrap按照屏幕的宽度的不同分成了四个种类：

• 大屏幕：width > 1200px
• 中等屏幕：992px < width < 1200px
• 小屏幕：768px < width < 992px
• 极小屏幕： width < 768px

为了方便判断当前属于哪种屏幕及屏幕的宽度（无需打开浏览器调试）

可以通过引入js来辅助我们

效果如图：

实现方法：

1. 引入jquery.js

2. 引入showScreen.js

showScreen.js 代码：

whatScreen();
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
window.location.href = "#footer";
window.onresize = function () {
  whatScreen();
}
function whatScreen() {

  var width = document.querySelector("html").offsetWidth;
  var title = document.querySelector("title");
  if (width <= 768) {
    title.innerHTML = "极小屏幕-" + width + "px";
  } else if (width > 768 && width <= 992) {
    title.innerHTML = "小屏幕-" + width + "px";
  } else if (width > 992 && width <= 1200) {
    title.innerHTML = "普通屏幕-" + width + "px";
  } else if (width > 1200) {
    title.innerHTML = "大屏幕-" + width + "px";
  }
}