Css 媒体查询没有响应_Css_Media Queries

Css 媒体查询没有响应

css

Css 媒体查询没有响应,css,media-queries,Css,Media Queries,我试图在屏幕宽度小于320px时更改CSS 当前，它被卡在最小宽度媒体查询，当我缩小屏幕时，它不会转到最大宽度媒体查询我已将此html添加到我的索引页：以下是我的CSS的一部分： div#imageColumn { color:white; background-color:black; margin:10px; } div#contentColumn { float:left; color:white; background-color:

我试图在屏幕宽度小于

320px

时更改CSS

当前，它被卡在

最小宽度

媒体查询，当我缩小屏幕时，它不会转到

最大宽度

媒体查询

我已将此html添加到我的索引页：

以下是我的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: `

这是我的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>


史蒂夫·斯科特
接触
西医。斯蒂芬·斯科特


关于我自己


代码


地理位置


设计

您的媒体查询存在冲突，因为您的

最大宽度：320px

和

最小宽度：320px

的值相同

因此，您必须在

最大宽度：320px

之前使用put

最小宽度：321px

，否则它将覆盖它，记住CSS代表级联。请注意，我在

minwidth

中使用了

321px

，以避免查询之间产生冲突

div#imageColumn{
颜色：白色；
背景色：黑色；
利润率：10px；
}
div#contentColumn{
浮动：左；
颜色：白色；
背景色：黑色；
利润率：10px；
}
@媒体屏幕和屏幕（最小宽度：321px）{
div#imageColumn{
浮动：对；
宽度：45%；
}
div#contentColumn{
宽度：25%；
}
}
@媒体屏幕和屏幕（最大宽度：320px）{
div#contentColumn{
宽度：75%；
}
div#imageColumn{
位置：绝对位置；
底部：0；
宽度：100%；
}
}

发布你的html代码库，但这是一个愚蠢的错误。你的代码根本无法理解。显示html，显示图片前后调整大小在你的设计。我现在有一个问题。有些CSS正在改变，但有些没有改变。这是CSSI解决了我的问题。在覆盖my@media规范之前列出的h1。您确定吗？我可以看到在

320px

上存在冲突的可能性，但如果特异性相等，那么以后会赢，对吗？这增加了OP的原始代码，其中添加了

min height

，以便我们可以看到元素，它似乎正在工作。我错过什么了吗？顺便说一句，我同意使用

1px

按钮，但这会使意图更加明确。确切地说，后者将获胜，在OP的情况下，后者是

minwidth

，它位于

320px

位置，类似于

max width

，因此它只应用

minwidth

，切勿使用

最大宽度

，因此当屏幕小于320px时，OP无法看到

<!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>