JS自定义栅格系统

最新推荐文章于 2023-02-14 11:29:16 发布

夏木炎

最新推荐文章于 2023-02-14 11:29:16 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap之旅文章标签：栅格系统 JS自定义栅格系统 JS自定义

本文链接：https://blog.csdn.net/xm393392625/article/details/80824342

版权

Bootstrap之旅专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.静态页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS自定义栅格系统</title>
		<style>
			/*
			 * 设置通用样式
			 */
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.container{
				height: 40px;
				margin: 0 auto;
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		</div>
		<script>
			window.addEventListener("load",function(){
				//1.获取常量
				var container=document.querySelector(".container");
				var clientW=0;
				//2.设置默认宽度
				resize();
				//3.监听窗口大小变化,动态设置container宽度
				window.addEventListener("resize",resize);
				function resize(){
					//获取改变后的宽度
					clientW=window.innerWidth;
					//判断
					if(clientW>=1200){//超大屏幕
						container.style.width="1170px";
					}else if(clientW>=992){//大屏幕
						container.style.width="970px";
					}else if(clientW>=768){//小屏幕
						container.style.width="750px";
					}else{//超小屏幕
						container.style.width="100%";
					}
				}
			});
		</script>
	</body>
</html>

二.效果

1）超大屏幕

2）大屏幕

3）小屏幕

夏木炎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS自定义栅格系统

一.静态页面代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS自定义栅格系统&lt;/title&gt; &lt;style&gt; /* * 设置通用样式 */ *{ margin: 0;
复制链接

扫一扫