媒体查询没有响应

我试图在屏幕宽度小于320px时更改CSS。媒体查询没有响应

目前它卡在min-width媒体查询中，并且在缩小我的屏幕时不会转到max-width媒体查询。

我加入这个网站给我的索引页： <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>

来源

2017-05-05 Steve Scott

发表您的HTML代码 –

抱歉，是愚蠢的。 Ur代码没有什么理解。显示html，显示图片后和之前调整你的设计。 –

我现在有问题。一些CSS正在改变，但其中一些不是。这是CSS –

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

所以你必须在max-width:320px之前使用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%; 
    } 
}

来源

2017-05-05 21:52:23 dippas

你确定吗？我可以看到'320px'上的冲突的可能性，但如果特异性相同，那么稍后会胜出？这个[** JSFiddle **]（https://jsfiddle.net/myrygh6e/）具有OP的原始代码，并添加了“min-height”，因此我们可以看到这些元素并且它似乎正在工作。我错过了什么吗？顺便说一下，我同意做'1px'的凹凸，但意图更清楚。 – hungerstar

正好后者会赢，在OP的情况下，后者是'min-width'，它在'320px'就像'max-width'，所以它只能**应用'min-width'，而不是'max因此，当屏幕小于320像素时，OP无法看到 – dippas

媒体查询没有响应

回答

相关问题