CSS媒體查詢不改變元素？

我試圖讓這個媒體查詢工作...我已經改變了邊框和元素的顏色和位置，所以我可以清楚地看到它的工作時間，但它似乎並沒有應用規則 - 我錯過了什麼？我在尋找空間和錯別字，但我看不到任何...CSS媒體查詢不改變元素？

HTML

<div id="introcontainer"> 
    <div id="introcontainer2"> 
     <div class="introbox" id="introbox1">48</div> 
     <div class="introbox" id="introbox2">3</div> 
     <div class="introbox" id="introbox3">£99</div> 
    </div> 
</div>

CSS

@media only screen and (min-width: 768px) and (max-width: 992px) { 

#introcontainer { 
    width: 660px; 
    height: 134px; 
    position: absolute; left: 50%; top: 100px; 
    margin-left: -330px; border-style: dashed; border-color: red;} 

.introbox { 
width: 214px; 
height: 130px; 
background: #fffff; 
opacity: 0.1; 
border-radius: 4px;} 
} 

#introcontainer {width: 660px; height: 134px; position: absolute; left: 50%;   top: 250px; margin-left: -330px; border-style: dashed; border-color: aqua;} 

#introcontainer2 {position: relative;} 
.introbox { 
width: 214px; 
height: 130px; 
background: #6666CC; 
opacity: 0.5; 
border-radius: 4px; 
} 

#introbox1 {position: absolute; left: 0px;} 

#introbox2 {margin-left: auto; margin-right: auto;} 
#introbox3 {position: absolute; right: 0px; top: 0px;}

來源

2016-05-02 scott_

如果有幫助，該網站是在www.webtuu.com - 如果移動下面768瀏覽器，該元素不改變，因爲我上面問。 –

對於您的信息：.introbox背景有5個f，多加1個或使用3. – IamFaysal

是否有機會忘記關閉@media？，因爲當我刪除：

@media only screen and (min-width: 768px) and (max-width: 992px) {

它的工作。

你可以看到它在這codepen。也許你的@media減速可能是錯誤的？

我認爲你應該把它放在你的普通css之後，或者改變最小/最大寬度。

來源

2016-05-02 17:54:07

看起來像是我的媒體查詢的定位，沒有意識到它應該在普通CSS之後，謝謝！ –

有幾件事情。首先，background:#fffff在.introbox應該是#ffffff或#fff。其次，@media規則中的規則正被@media以外的以下規則覆蓋。沒關係，只要移動@media規則，使其位於CSS的末尾而不是開頭。如果你需要別的東西，讓我知道。

來源

2016-05-02 17:52:31

把你的媒體查詢CSS部分後定期的CSS聲明，這應該工作。

來源

2016-05-02 17:52:39 Moebius

如果你想改變一個元素的規則的時候，屏幕是< 992px您應使用此代碼：

@media screen and (max-width:992px){...}

，並儘量避免在範圍查詢，如：

and (min-width: 768px) and (max-width: 992px)

，但你必須把它放在「正常」的CSS之後。

看到這個DEMO

來源

2016-05-02 17:55:57 paolobasso

對不起，我的意思是<992，而不是768.它看起來像我的錯誤沒有經過普通的CSS後，雖然沒有意識到這有所作爲，謝謝！ –

噢好吧，但代碼無論如何工作:)（我要更新answare） – paolobasso

CSS媒體查詢不改變元素？

回答

相關問題