在CSS中我们经常使用@media screen来查询设备宽度，其实JQuery也可以实现这个功能，但是我不建议大家使用JQuery来实现，不过有的时候做前端又必须要使用这个方法来判断可视区域，下面我们一起来复习下JQuery的相关知识。我们可以使用.width()以及.height()方法来获取相关元素或者窗口的宽高。
$(window).width(); //浏览器时下窗口可视区域宽度
$(window).height(); //浏览器时下窗口可视区域高度
$(document).height(); //浏览器时下窗口文档的高度
$(document.body).height();//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true);//浏览器时下窗口文档body的总高度 包括border padding margin
$(document).width();//浏览器时下窗口文档对于象宽度
$(document.body).width();//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true);//浏览器时下窗口文档body的总宽度 包括border padding margin
复习了上面的知识，我们就可以判断当前body可是区域的宽度是否小于768、480等，代码如下
if(document.body.clientWidth<768){
alert('可视区域小于768px');
}
if(document.body.clientWidth<480){
alert('可视区域小于480px');
}
这样必须要刷新页面才能弹出提示信息，并不能实时对浏览器大小进行监听，因此我们必须使用$(window).resize()方法，代码如下：
//实时监听窗口改变
$(window).resize(function() {
if(document.body.clientWidth<768){
alert('可视区域小于768px');
}
if(document.body.clientWidth<480){
alert('可视区域小于480px');
}
}