html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/adaption2.css">
<title>自适应页面</title>
</head>
<body>
<header>header</header>
<section class="flexContainer">
<nav>navigation:导航</nav>
<section class="content">section：内容</section>
<aside>aside：广告、侧边栏</aside>
</section>
<footer>footer</footer>
</body>
</html>
css：
html{font-size: 62.5%;}
body{text-align: center;font-size: 3rem;}
header{width: 100%;background: #4d7d0f; min-height: 7.5rem;line-height: 7.5rem;}
.flexContainer{ display: flex;}
nav{flex:1 1 20%;background: #faad34;max-width: 20rem; min-height: 60rem;margin: 3px;padding: 5px;word-wrap:break-word;}
.content{flex:2 1 60%;background: #e37822;margin: 3px;padding: 5px;}
aside{flex:1 1 20%;background: #f8e1bc;margin: 3px;padding: 5px;}
footer{width: 100%; background: #ece8e1;min-height: 75px;}
@media all and (max-width: 600px){
body{font-size: 2rem;}
.flexContainer{width: 100%; display: flex;flex-flow:column wrap;}
nav{min-height: 10rem;order:1;max-width: 100%;}
.content{min-height: 20rem;order:3;}
aside{min-height: 10rem;order:2;}
footer{min-height: 7.5rem;}
}
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
