判断屏幕的大小
功能:主要是辅助你进行
响应式布局的时候,方便你在不同的屏幕大小的时候设置不同的效果。(一般在响应式布局的时候用)
响应布局屏幕的参数:
xs(小于768px) width:auto
sm(大于等于768px) width:720+槽宽
md(大于等于992px) width:940+槽宽
lg(大于等于1200) width:1140+槽宽
如下图所示,可以看到浏览器显示页面的大小的改变而显示浏览器的分辨率,这样可以方便我们根据不同的分辨率写不同的布局效果。
大屏幕
![](/d/file/jzjy/2021-04-15/6496a9ce4c99566a74d53bdcd805b684.jpg)
小屏幕
![](/d/file/jzjy/2021-04-15/7af17bb15edec70784b77ab92ae5abc0.jpg)
下面是判断屏幕大小的核心代码:
<!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>