CSS 多媒体查询 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS 多媒体查询 - 自学教程(runoops.com)</title>
	<style>
		.wrapper {
			overflow: auto;
		}

#main {
			margin-left: 4px;
		}

#leftsidebar {
			float: none;
			width: auto;
		}

#menulist {
			margin: 0;
			padding: 0;
		}

.menuitem {
			background: #CDF0F6;
			border: 1px solid #d4d4d4;
			border-radius: 4px;
			list-style-type: none;
			margin: 4px;
			padding: 2px;
		}

@media screen and (min-width: 480px) {
			#leftsidebar {
				width: 200px;
				float: left;
			}

#main {
				margin-left: 216px;
			}
		}
	</style>
</head>

<body>

<div class="wrapper">
		<div id="leftsidebar">
			<ul id="menulist">
				<li class="menuitem">Menu-item 1</li>
				<li class="menuitem">Menu-item 2</li>
				<li class="menuitem">Menu-item 3</li>
				<li class="menuitem">Menu-item 4</li>
				<li class="menuitem">Menu-item 5</li>
			</ul>
		</div>
		<div id="main">
			<h1>重置浏览器窗口查看效果！</h1>
			<p>在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。</p>
		</div>
	</div>

</body>

</html>