利用js判断屏幕的大小来进行不同页面效果布局

最新推荐文章于 2023-09-14 17:55:22 发布

webshitian

最新推荐文章于 2023-09-14 17:55:22 发布

阅读量3.2k

点赞数 2

分类专栏： web前端开发 js

本文链接：https://blog.csdn.net/qq_42943107/article/details/96891661

版权

web前端开发同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

判断屏幕的大小
功能：主要是辅助你进行响应式布局的时候，方便你在不同的屏幕大小的时候设置不同的效果。（一般在响应式布局的时候用）
响应布局屏幕的参数：
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>

webshitian

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
利用js判断屏幕的大小来进行不同页面效果布局

判断屏幕的大小功能：主要是辅助你进行响应式布局的时候，方便你在不同的屏幕大小的时候设置不同的效果。（一般在响应式布局的时候用）响应布局屏幕的参数：xs（小于768px） width：autosm（大于等于768px） width：720+槽宽md（大于等于992px） width：940+槽宽lg（大于等于1200） width：1140+槽宽如下图所示，可以看到浏览器显示页...
复制链接

扫一扫

专栏目录