1

媒体查询不适用，我正在尝试为 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;
    }
}

似乎我的媒体查询仍然应用了我的主要样式的位置、顶部、左侧和高度，我该如何解决这个问题？

4

3 回答 3

1

那是因为您没有更改媒体查询区域中的位置属性..将其更改为

.left {
      position:static;
 }

编辑

仅使用 @media only 屏幕和 (max-width: 480px) { }

http://jsfiddle.net/Lyqjr/

于 2013-09-08T06:00:06.627 回答
0

你可以设置

top: inherit;
left:inherit;
height: auto;
于 2013-09-08T05:58:52.693 回答
0

使用这个条件

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

}
于 2013-09-08T06:00:12.107 回答