媒体查询不适用,我正在尝试为 iphone 设置 MQ
这是 HTML
<body>
<div class="left">
<div class="logo">
</div>
<div class="nav">
</div>
<div id="leftfooter">
<div id="colorfoot">
</div>
</div>
</div>
<div class="right">
<div class="rightt">
<div class="main">
<h1 class="headers">Curriculum</h1>
<div id="primelists">
<div id="primelist1">
</div>
<div id="primelist2">
</div>
</div>
</div>
</div>
<div class="right_footer">
<div class="labels">
</div>
</div>
</div
</body>
</html>
<body>
<div class="left">
<div class="logo">
</div>
<div class="nav">
</div>
<div id="leftfooter">
<div id="colorfoot">
</div>
</div>
</div>
<div class="right">
<div class="rightt">
<div class="main">
<h1 class="headers">Curriculum</h1>
<div id="primelists">
<div id="primelist1">
</div>
<div id="primelist2">
</div>
</div>
</div>
</div>
<div class="right_footer">
<div class="labels">
</div>
</div>
</div
</body>
</html>`
这是我目前的主要 CSS
.right {
padding: 0 0 0 270px;
border-right: 10px solid #C9CACE;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 248px;
background: url('../img/bg.gif') repeat;
}
这是我的媒体查询
@media only screen and (min-width: 320px) and (max-width: 480px) {
.right {
padding: 0 0 0 270px;
border-right: 10px solid #C9CACE;
display: table-cell;
}
.left {
position: static;
display: table-cell;
width: 248px;
background: url('../img/bg.gif') repeat;
}
}
似乎我的媒体查询仍然应用了我的主要样式的位置、顶部、左侧和高度,我该如何解决这个问题?