Question

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

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

Answer 1

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

.left {
      position:static;
 }

修改

仅使用@media only屏幕和（max-width：480px）{}

http://jsfiddle.net/Lyqjr/

Answer 2

你可以设置

top: inherit;
left:inherit;
height: auto;

Answer 3

使用此条件

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

}

媒体查询未应用

3 个答案: