嘿，伙计们，这是我的网站布局
HTML：
<body>
<div id="sidr">
<ul>
<li><a href="#"><img src="images/iconmonstr-magnifier-icon-24.png" width="24" height="24" alt=""/> Concepts</a></li>
<li class="active"><a href="#">Coming Soon</a></li>
<li><a href="#">Out Now</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
<div class="container">
<div class="row">
<div class="col col-12">
<a id="simple-menu" href="#sidr">
<div class="menu"> </div>
</a>
SWITCHYARD
<div class="search"> </div>
</div>
<a href="#">
<div class="col col-13">
<div class="ghost-btn">
<div class="text_14">Feature Article</div>
<div class="text_18">Why Her Will Dominate UI Design</div>
</div>
</div></a>
</div>
<div class="container">
<div class="row_1" >
<div class="col col-41">
<a class="various fancybox.iframe" href="artikel_template.html"> <div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div> </a>
</div>
<div class="col col-42">
<a class="various fancybox.iframe" href="artikel_template.html"> <div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div></a><br>
</div>
<div class="col col-43">
<a class="various fancybox.iframe" href="artikel_template.html"><div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div> </a><br>
</div>
<div class="col col-44">
<a class="various fancybox.iframe" href="artikel_template.html"><div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div></a><br>
</div>
<div class="col col-45">
<a class="various fancybox.iframe" href="artikel_template.html"><div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div></a><br>
</div>
<div class="col col-46">
<a class="various fancybox.iframe" href="artikel_template.html"><div class="ghost-btn-small"> <div class="text_14">Feature Article</div> </div></a><br>
</div>
<a href="#0" class="cd-top">Top</a>
</div>
</div>
</body>
</html>
和CSS
/* CSS Document */
* {
box-sizing:border-box;
padding:0;
margin:0;
}
/* << Die sachen beim sternchen sollten immer rein */
a{
text-decoration: none;
}
body {
background:#FFF;
}
.container {
width:960px;
margin: 0 auto 0 auto;
}
.row {
overflow:hidden;
margin: 0 0 20px 0;
}
.col {
float:left;
margin:0 10px 0 10px;
}
.col-1 {
width:60px;
}
.col-2 {
width:140px;
}
.col-3 {
width:220px;
}
/* Artikel Content */
.col-41 {
margin-bottom:20px;
z-index:-100;
position: relative;
background-color:#B04143;
width:300px;
height:400px;
}
.col-42 {
margin-bottom:20px;
z-index:-100;
position: relative;
width:300px;
height:400px;
background-color:#B04143;
}
.col-43 {
margin-bottom:20px;
z-index:-100;
position: relative;
width:300px;
height:400px;
background-color:#B04143;
}
.col-44 {
margin-bottom:20px;
z-index:-100;
position: relative;
width:300px;
height:400px;
background-color:#B04143;
}
.col-45 {
margin-bottom:20px;
z-index:-100;
position: relative;
width:300px;
height:400px;
background-color:#B04143;
}
.col-46 {
margin-bottom:20px;
z-index:-100;
position: relative;
width:300px;
height:400px;
background-color:#B04143;
}
.col-11 {
width:860px;
background-color:#B04143;
}
.col-12 {
width:940px;
height:50px;
font-family: "proxima-nova";
color:white;
letter-spacing: .2em;
font-size:27px;
position: absolute;
padding-top:10px;
text-align: center;
background-color:#B04143;
}
.col-13 {
width:940px;
height:495px;
margin-top:0px;
background-color:#B04143;
text-align: center;
}
.row_1{
margin:0px;
}
.newstext {
height:50px;
font-size:24px;
font-family: "proxima-nova";
padding-left:10px; padding-top:10px; padding-right:10px;
z-index:1;
background-color:#f1e39b;
}
.btn{
width:10px;
height:10px;
background-color:#f1e39b;
border-radius:5px;
z-index:100;
bottom: 20px;
left: 20px;
position: absolute;
}
.menu{
width:24px;
height:24px;
background-image:url(images/iconmonstr-menu-icon-24.png);
z-index:100;
float:left;
margin-left:10px;
}
.search{
width:24px;
height:24px;
background-image:url(images/iconmonstr-magnifier-icon-24.png);
z-index:100;
float:right;
margin-right:10px;
}
.feature{
width:300px;
height:400px;
background-color:#f1e39b;
float:right;
padding:5px;}
.text_18{
font-family: "ff-tisa-web-pro";
font-size:18pt;
}
.text_14{
font-family: "ff-tisa-web-pro";
font-size:14pt;
margin-top:2px;
}
@media only screen and (max-device-width : 480px) {
.cd-top {
right: 20px;
bottom: 20px;
}
.container {
width: 480px;
margin: 0 auto 0 auto;
}
.col{
background-color:#0F3;
}
.col-12 {
width: 480px;
height:135px;
}
.col-13 {
width: 480px;
height:400px;
margin-top:40px;
}
.text_18{
font-family: "ff-tisa-web-pro";
font-size:12pt;
}
.text_14{
font-family: "ff-tisa-web-pro";
font-size:9pt;
margin-top:2px;
}
/* Ghost Button */
.ghost-btn {
display: inline-block;
text-decoration: none;
text-align:center;
margin: 200px auto 0 auto;
border: 1px solid #fff;
height: 90px;
width:50%;
line-height: 30%;
color: #fff;
}
@media only screen and (max-device-width : 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
.container {
width: 60%;
margin: 0 auto 0 auto;
}
.col{
background-color:#0F3;
}
.col-4 {
width: 40%;
height:400px;
margin-top:20px;
}
.col-12 {
width: 50%;
height:135px;
font-family: "proxima-nova";
color:white;
letter-spacing: .2em;
font-size:50%px;
position: absolute;
background-image:url(images/frosted.jpg);
padding-top:10px;
text-align: center;
}
.col-13 {
width: 50%;
height:400px;
margin-top:40px;
}
您看到我正在处理媒体查询。我需要一个“较低”的ipad版本和该网站的手机版本。桌面版有3个大列，我需要这个为iphone版本1。但是我根本没有这个工作。你们有没有想过如何让这个设计“响应”？
的小提琴答案 0 :(得分：0)
更改
@media only screen and (max-device-width: 480px)
到
@media only screen and (max-width: 480px)