響應式頁面布局

2023-06-28 12:34:35

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>響應式布局</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/pc.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/ipad.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/shouji.css" target="_blank" rel="external nofollow" >
<style>


</style>
</head>

<body>
<header>
 我是頭部
</header>
<nav>
我是導航
</nav>
<aside>
我是側邊攔
</aside>
<section>
我是空白區域
</section>
<footer>
我是頁腳
</footer>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*手機端*/
@media screen and (max-width: 375px){
	*{color:red}
	body{ height:800px}
	header{width:100%; background:red;height:10%}
	nav{ display:none;}
	aside{width:100%; background:#FF6; height:50%;}
	section{width:100%; height:30%; background:#09c;}
	footer{width:100%; height:10%; background:#93C}
	}

@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1024px){
	*{color:red}
	body{ height:800px}
	header{width:100%; background:green;height:10%}
	nav{width:100%; background:#9F3;}
	aside{width:100%; background:#FF6; height:50%;}
	section{width:100%; height:30%; background:#09c;}
	footer{width:100%; height:10%; background:#93C}
	}

,

@charset "utf-8";
/* CSS Document */
/*pc端*/
header{width:100%; height:100px; background:#FCF}
nav{ width:100%; height:50px; background:#FFC;}
aside{width:30%; height:400px; background:#C9F; float:left;}
section{width:70%; height:400px; background:#9C6; float:right}
footer{clear:both; width:100%; height:100px; background:#09c;}