<!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>
<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>
2875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
