bootstrap学习补充

最新推荐文章于 2024-08-19 15:26:51 发布

爱生活，爱编程

最新推荐文章于 2024-08-19 15:26:51 发布

阅读量181

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_15009739/article/details/104002601

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

眼高手低是大的忌讳，这个简单的东西，拿不下，总觉得不是那么回事！

<!DOCTYPE html>
<html>
<head>
	<title>bootstrap学习</title>
	<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			.container {
				height: 150px;
				background-color: pink;
				margin: 0 auto;
			}	

			/* 看样我这个媒体查询有错误！*/
			/*  768 ,992 ,1200*/	
			/*媒体查询*/
			@media screen and(max-width: 767px){
				.container{
					width:100%;	
				}
			}

			@media screen and (min-width:768px){
				.container{
				   width:750px;
				}
				
			}

			@media screen and (min-width: 992px){
				.container{
					width:970px;
				}
			}

			@media screen and (min-width: 1200px){
				.container{
					width:1170px;
				}
				
			}

	</style>
</head>
<body>

	<div class="container">
		
	</div>

</body>
</html>

在不同的屏幕宽度，显示不同的样式的写法，用到了媒体查询！