CSS3 Media Queries 实现响应式demo

最新推荐文章于 2020-10-12 16:08:40 发布

EndingCoder

最新推荐文章于 2020-10-12 16:08:40 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

分类专栏： Web App HTML/CSS

本文链接：https://blog.youkuaiyun.com/zimin1985/article/details/19038689

HTML/CSS 同时被 2 个专栏收录

34 篇文章

订阅专栏

Web App

8 篇文章

订阅专栏

本文通过实例展示了如何使用CSS媒体查询来适应不同的屏幕尺寸。包括最大宽度、最小宽度及介于两者之间的响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Media Query Demos</title>
<style type="text/css">
.wrapper {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}

.viewing-area span {
	color: #666;
	display: none;
}

/* max-width */
@media screen and (max-width: 600px) {
	.one {
		background: #F9C;
	}
	span.lt600 {
		display: inline-block;
	}
}

/* min-width */
@media screen and (min-width: 900px) {
	.two {
		background: #F90;
	}
	span.gt900 {
		display: inline-block;
	}
}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
	.three {
		background: #9CF;
	}
	span.bt600-900 {
		display: inline-block;
	}
}

/* max device width */
@media screen and (max-device-width: 480px) {
	.iphone {
		background: #ccc;
	}
}
</style>
</head>

<body>
	<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
	<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
	<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
	<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
	<p class="viewing-area">
        <strong>Your current viewing area is:</strong>
        <span class="lt600">less than 600px</span>
        <span class="bt600-900">between 600 - 900px</span>
        <span class="gt900">greater than 900px</span>
    </p>
</body>
</html>