判断屏幕的大小
功能：主要是辅助你进行
响应式布局的时候，方便你在不同的屏幕大小的时候设置不同的效果。（一般在响应式布局的时候用）
响应布局屏幕的参数：
xs（小于768px） width：auto
sm（大于等于768px） width：720+槽宽
md（大于等于992px） width：940+槽宽
lg（大于等于1200） width：1140+槽宽
如下图所示，可以看到浏览器显示页面的大小的改变而显示浏览器的分辨率，这样可以方便我们根据不同的分辨率写不同的布局效果。
大屏幕
小屏幕
下面是判断屏幕大小的核心代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断屏幕的大小</title>
<style type="text/css">
</style>
</head>
<body>
<script>
whatScreen();
window.onresize = function() {
whatScreen();
};
function whatScreen() {
var width = document.querySelector("html").offsetWidth;
var title = document.querySelector("title");
if(width <= 768) {
title.innerHTML = "极小屏幕-" + width;
} else {
if(width > 768 && width <= 992) {
title.innerHTML = "小屏幕-" + width;
} else {
if(width > 992 && width <= 1200) {
title.innerHTML = "普通屏幕-" + width;
} else {
if(width > 1200) {
title.innerHTML = "大屏幕-" + width;
}
}
}
}
}
</script>
</body>
</html>
淘宝店
