媒体查询自定义栅格系统

最新推荐文章于 2023-05-05 15:42:42 发布

夏木炎

最新推荐文章于 2023-05-05 15:42:42 发布

阅读量656

点赞数

分类专栏： Bootstrap之旅文章标签：媒体查询栅格系统

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

版权

Bootstrap之旅专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--设置缩放和绘制-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>媒体查询自定义栅格系统</title>
		<script  src="../ mypethome/lib/html5shiv/html5shiv.js" ></script>
		<script  src="../ mypethome/lib/respond/respond.min.js" ></script>
		<style>
			/*
			 * 设置通用样式
			 */
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.container{
				height: 40px;
				margin: 0 auto;
				background-color: gold;
			}
			/*
			 * 媒体查询
			 */
			@media screen and (max-width: 768px) {
				/*超小屏幕*/
				.container{
					width: 100%;
				}
			}
			@media screen and (min-width: 768px) and (max-width: 992px){
				/*小屏幕*/
				.container{
					width: 750px;
				}
			}
			@media screen and (min-width: 992px) and (max-width: 1200px){
				/*大屏幕*/
				.container{
					width: 970px;
				}
			}
			@media screen and (min-width: 1200px) {
				/*超大屏幕*/
				.container{
					width: 1170px;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		</div>
		
	</body>
</html>