【笔记】学习CSS布局14——媒体查询

最新推荐文章于 2024-07-24 19:01:15 发布

二木成林

最新推荐文章于 2024-07-24 19:01:15 发布

阅读量190

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/cnds123321/article/details/84625775

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		@media screen and (min-width:600px) {
			div {
				border:4px solid #6ac5ac;
			}
			nav {
				float:left;
				width:25%;
				border:4px solid #d64078;
			}
			section {
				margin-left:25%;
				border:4px solid #fdc72f;
			}
		}
		@media screen and (min-width:599px){
			nav ul li {
				display: inline;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<nav>
			<ul>
				<li><a href="#">文件</a></li>
				<li><a href="#">编辑</a></li>
				<li><a href="#">选择</a></li>
				<li><a href="#">查找</a></li>
				<li><a href="#">视图</a></li>
				<li><a href="#">工具</a></li>
			</ul>
		</nav>
		<section>
			当你调整浏览器窗口大小时，布局比以前更酷了！
		</section>
		<section>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
		</section>
	</div>
</body>
</html>

现在我们的布局在移动浏览器上也显示的很棒。这里有一些同样使用了媒体查询的著名站点。在MDN文档中你还可以学到更多有关媒体查询的知识。