Html 未应用媒体查询_Html_Css

Html 未应用媒体查询

html css

Html 未应用媒体查询,html,css,Html,Css,媒体查询不适用，我正在尝试为iphone设置MQ 这是HTML <body> <div class="left"> <div class="logo"> </div> <div class="nav"> </div> <div id="leftfo

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

这是我的媒体查询

 @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;
    }
}

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

您可以设置

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

你可以设置

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

这是因为您没有更改“媒体查询”区域中的“位置”属性。。换成

.left {
      position:static;
 }

编辑

仅使用@media only屏幕和（最大宽度：480px）{}

这是因为您没有更改媒体查询区域中的position属性。。换成

.left {
      position:static;
 }

编辑

仅使用@media only屏幕和（最大宽度：480px）{}

使用此条件

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

}

使用此条件

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

}

您的媒体查询似乎应用了媒体查询中的设置？什么？我认为您应该使用最小宽度最大宽度而不是最小设备宽度…您的媒体查询似乎应用了媒体查询中的设置？什么？我认为你应该使用最小宽度最大宽度而不是最小设备宽度…奇怪的是，移动浏览器仍然显示固定的左列，即使我在MQI中指定它为position:static。我假设，你需要为媒体查询设置padding left:0以及position:static；你能显示实际的html标记吗？它现在启动了，对不起：）哇，我真的以为这会起作用。。。我已经粘贴了您的精确代码，我可以看到它在fiddle上工作，但在我的iPhone上，它的左栏显示为红色，好像查询没有影响它。我现在在想，也许是我的手机出了问题？哦，我的道歉，尼特斯！你的代码是完美的，这是我的愚蠢，我忘记了感谢你的帮助，你是一个传奇！奇怪的是，移动浏览器仍然将左列显示为固定列，尽管我已在MQI中将其指定为position:static。我假设，您需要为媒体查询设置padding left:0以及position:static；你能显示实际的html标记吗？它现在启动了，对不起：）哇，我真的以为这会起作用。。。我已经粘贴了您的精确代码，我可以看到它在fiddle上工作，但在我的iPhone上，它的左栏显示为红色，好像查询没有影响它。我现在在想，也许是我的手机出了问题？哦，我的道歉，尼特斯！你的代码是完美的，这是我的愚蠢，我忘记了感谢你的帮助，你是一个传奇！我已经添加了，我的问题仍然存在。是的，当浏览器宽度介于320到480之间时，此条件起作用。我在iphone上进行了测试。我已经添加了，我的问题仍然存在。是的，当浏览器宽度介于320到480之间时，此条件起作用。不，对手机布局没有影响不，对手机布局没有影响