CSS3的media的用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Expires" CONTENT="-1">
		<meta http-equiv="Cache-Control" CONTENT="no-cache">
		<meta http-equiv="Pragma" CONTENT="no-cache">
		<title>购物商城触屏版</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container {
				width: 960;
				margin: auto;
			}
			.wrapper {
				width: 740px;
				float: left;
			}
			#Main {
				width: 520px;
				float: right;
				background: yellow;
			}
			#Sub01 {
				width: 200px;
				float: left;
				background: orange;
			}
			#Sub02 {
				width: 200px;
				float: right;
				background: green;
			}
			
			/***/
			@media only screen and (min-width: 1000px) {
				.container {
					width: 1000px;
				}
				.wrapper {
					width: 780px;
					float: left;
				}
				p {
					line-height: 600px;
					text-align: center;
					font-weight: bold;
					font-size: 2em;
					margin: 0 0 20px 0;
				}
				#Main {
					width: 560px;
					float: right;
					background: yellow;
				}
				#Sub01 {
					width: 200px;
					float: left;
					background: orange;
				}
				#Sub02 {
					width: 200px;
					float: right;
					background: green;
				}
			}
			
				/***/
			@media only screen and (min-width: 640px) and (max-width: 999px){
				.container {
					width: 640px;
				}
				.wrapper {
					width: 640px;
					float: none;
				}
				p {
					line-height: 400px;
				}
				#Main {
					width: 420px;
					float: right;
					background: yellow;
				}
				#Sub01 {
					width: 200px;
					float: left;
					background: orange;
				}
				#Sub02 {
					width: 100%;
					float: none;
					clear: both;
					line-height: 150px;
					background: green;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="wrapper">
				<p id="Main">
					MAIN
				</p>
				<p id="Sub01">
					Sub01
				</p>
			</div>
			<p id="Sub02">
				Sub02
			</p>
		</div>
	</body>
</html>
猜你喜欢
