响应式webdemo

来源：互联网发布：360抢票软件编辑：程序博客网时间：2024/06/06 09:47

<!doctype html>
<html>

<head>
<title>responsive web design test</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style type="text/css">

body{
font:1em/150%;
}

/***
qtructure***/

#body{
padding:5px;
width:960px;
margin:20px auto;
}

#header{
height:180px;
}

#content{

width:600px;
float:left;
}

#right{
width:300px;
float:right;
}

#footer{
clear:both;
}

/**
media queries
*/

/* for 980px or less*/

@media screen and (max-width:980px){

#body{width:94%;}
#content{width:65%;}
#right{width:30%;}
}

/* for 700px or less*/

@media screen and (max-width:700px){

#content{
widht:auto;
float:none;
}
#right{
width:auto;
float:none;
}
}

/* for 480px or less*/

@media screen and (max-width:480px){

#header{
height:auto;
}

#right{
display:none;
}
}

/* border & guideline*/

#content{
background:#f8f8f8;
}

#right{background:#f0efef;}
#header,#content,#right{margin-bottom:5px;}
#body, #header,#content,#right,#footer{
border:solid 1px #ccc;
}
</style>
</head>
<body>

<div id="body">

<div id="header">i am head</div>
<div id="content">

<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p> </div>
<div id="right">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div id="footer">
fsdfsdfdsfdsdfdsssssssssssfsdf
</div>
</div>
</body>
</html>