媒體查詢沒有響應

我試圖在屏幕寬度小於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

媒體查詢沒有響應

回答

相關問題