媒体查询没有响应答案

【问题标题】：media query not being responsive媒体查询没有响应
【发布时间】：2017-05-06 09:54:50
【问题描述】：

我正在尝试在屏幕宽度小于320px 时更改 CSS。

目前它停留在min-width 媒体查询，当我缩小屏幕时不会转到max-width 媒体查询。

我将此 html 添加到我的索引页面： <meta name="viewport" content="width=device-width">

这是我的 CSS 的一部分：

div#imageColumn {
    color:white;
    background-color:black;
    margin:10px;
}
div#contentColumn {
    float:left;
    color:white;
    background-color: black;
    margin:10px;
}

@media screen and (max-width:320px){
    div#contentColumn {
    width:75%;
    }

    div#imageColumn {
        position: absolute;
        bottom:0;
        width:100%;
    }
}

@media screen and (min-width:320px){
    div#imageColumn {
        float:right;
        width:45%;
    }

    div#contentColumn {
        width:25%;
    }
}

我错过了什么吗？

编辑：现在已经完成了一半。 @Media 似乎是针对某些属性而触发的，但不是针对其他属性。文本在 810 处移动到屏幕底部，但 h1 对象的字体大小没有改变。

CSS： `

body {
    font-family: 'Heebo', sans-serif;
    background-color:black;
    }

div#WmStephenScott {
    font-family: 'Heebo', sans-serif;
    color: white;
    background-color: #C94B5B;
    padding-top: 40px;
    padding-bottom:40px;
    padding-left:40px;
    }
div#contactForm {
    float:right;
    padding-right: 100px;
}
h1#WmStephenScott {
    padding-left:40px;
    font-size:40px;
    }
h3#contactMe {
    float:right;
    color:black;
    padding-right:80px;
    padding-top:200px;
    font-size: 20px;
}
p {
    color:white;
    font-size:18px;
    }

aside {
    float:left;
    background-color:'F0E4C9';
    color: white;
    padding-left:40px;
    opacity:1;
    width:20%;
    }
div#imageColumn {
        color:white;
        background-color:black;
        margin:10px;
    }
div#contentColumn {
        float:left;
        color:white;
        background-color: black;
        margin:10px;
    }

@media screen and (max-width:810x){
    div#contentColumn {
        width:50%;
    }

    div#imageColumn {
        position: absolute;
        bottom:0;
        width:50%;
    }

    aside {
        font-size:20px;
        padding:5px;
    }

    h1#WmStephenScott {
        font-size:20px;
        padding-left:15px;
    }
}

@media screen and (min-width:811px){
    div#imageColumn {
        float:right;
        width:45%;
    }

    div#contentColumn {
        width:25%;
    }
}




div#feedbackFormDiv {
    background-color:#C94B5B;
    float:right;
    padding-right:40px;
}

head {
    }
}`

这是我的 HTML：

<!DOCTYPE html>

<html>

    <head>
          <title>Steve Scott</title>
        <meta name="viewport" content="width=device-width">
        <link href="https://fonts.googleapis.com/css?family=Heebo:400,800" rel="stylesheet">
        <link href="{{url_for('static', filename='css/stylesheet.css')}}" rel='stylesheet' type='text/css'/>
        <script type="text/javascript" src="{{url_for('static', filename='js/jquery-2.1.0.js')}}"></script>
        <script type='text/javascript' src="{{url_for('static', filename='js/script.js')}}"></script>
    </head>
    <body>
    <div id='WmStephenScott'>
            <h3 id='contactMe'>Contact</h3>
            <h1 id='WmStephenScott'>Wm. Stephen Scott</h1>

        </div>

        <aside>
            <div id='aside'>
                <br/>
                <h2 id='AboutMe'>About Myself</h2>
                <br/>
                <h2 id='Code'>Code</h2>
                <br/>
                <h2 id='Geo'>Geo</h2>
                <br/>
                <h2 id='Design'>Design</h2>
                <br/>
            </div>  
        </aside>
        <div id='contentColumn'>

        </div>
        <div id='imageColumn'>
        </div>
<!--
<div id='feedbackFormDiv'>
<h2></h2>
</div>
-->

    </footer>
    </body>
    <footer>

</html>

【问题讨论】：

发布您的 html 代码
对不起，这是个笨蛋。你的代码什么都不懂。显示 html，在您的设计中调整大小前后显示图片。
我现在遇到了问题。一些 CSS 正在改变，但有些没有。这是CSS
我发现了我的问题。在覆盖我的@media 规范之前列出的 h1。

标签： css media-queries

【解决方案1】：

您的媒体查询存在冲突，因为您的 max-width:320px 和 min-width:320px 的值相同，

所以你必须在max-width:320px之前使用put min-width:321px，否则它会覆盖它，记住CSS代表级联。请注意，我在min-width 中使用了321px，以免在查询之间产生冲突。

div#imageColumn {
    color:white;
    background-color:black;
    margin:10px;
}

div#contentColumn {
    float:left;
    color:white;
    background-color: black;
    margin:10px;
}

@media screen and (min-width:321px) {
  div#imageColumn {
    float: right;
    width: 45%;
  }
  div#contentColumn {
    width: 25%;
  }
}

@media screen and (max-width:320px) {
  div#contentColumn {
    width: 75%;
  }
  div#imageColumn {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

【讨论】：

你确定吗？我可以在320px 看到潜在的冲突，但如果特异性相同，那么稍后会胜出，对吧？这个JSFiddle 具有添加了min-height 的OP 原始代码，因此我们可以看到元素并且它似乎正在工作。我错过了什么吗？顺便说一句，我同意做1px 碰撞，使意图更明确。
正是后者会赢，在 OP 的情况下，后者是 min-width，它位于 320px，就像 max-width，所以它仅应用 min-width，从来没有 max-width 因此 OP 看不到屏幕何时小于 320px