響應的網站和媒體查詢

我使用媒體查詢如下響應的網站和媒體查詢

@media (min-width:100px) and (max-width:639px) 
{ 
} 
@media (min-width:640px) and (max-width:960px) 
{ 
    .box {background-color:red;} 
} 
@media (width:768px) 
{ 
    .box {background-color:green; } 
} 
@media (min-width:961px) 
{ 
}

我想特別針對於屏幕768像素的一些div元素，使我一般想例如，它似乎正是我想要覆蓋通過CSS在@media (min-width:640px) and (max-width:960px)定義的CSS這是針對屏幕768 @media (min-width:768px)

目前它仍然顯示我框，紅色，而它應該是紅色的，我不知道CSS是如何符合我的第二個媒體查詢後定義它，它會超過它。

我怎樣可以針對使用媒體查詢特定設備

某些元素

例如：

更新：

我不知道究竟是錯的它把我複製粘貼@media (width:768px) {部分來自小提琴&它在我的實際頁面中工作。可能是一些無形的錯字錯..

來源

2014-05-20 Learning

你用重要的關鍵字嘗試過嗎？ –

是的，我嘗試過！重要的關鍵字和令我驚訝的是它在小提琴上工作，但不在實際的網頁中。媒體查詢按照與小提琴相同的順序排列.. – Learning

目前它仍然顯示我爲紅色的框，而它應該是紅色的，你是什麼意思？ –

這只是你會希望你的正常的CSS媒體查詢

#gallery-1 img { 
    width:375px; 
} 
@media screen and (min-width: 1366px) { 
    #gallery-1 img {width:375px;} 
} 
@media screen and (min-width: 1440px) { 
    #gallery-1 img {width:428px;} 
} 
@media screen and (min-width: 1600px) { 
    #gallery-1 img {width:434px;} 
} 
@media screen and (min-width: 1920px) { 
    #gallery-1 img {width:540px;} 
}

而當你使用媒體查詢之前媒體查詢的例子，您想要指定您想要的屏幕尺寸，以便在@media之後使用screen。我希望這是你正在尋找的東西，並會幫助你！

這裏是一個小示例腳本我做了

<style> 
#box { 
    width: 500px; 
    height: 200px; 
    background: yellow; 
    border: 1px solid #000; 
} 
@media screen and (max-width:1000px) { 
    #box { background: red; } 
} 
@media screen and (min-width:1000px) and (max-width:1200px) { 
    #box { background: green; } 
} 
@media screen and (min-width:1200px) and (max-width:1400px) { 
    #box { background: blue; } 
} 
</style> 
<div id="box"> 

</div>

上的jsfiddle屏幕尺寸不是整個屏幕，它的小盒子預覽是這樣，你需要做的尺寸更小，看效果，這裏是一個DEMO調整你的屏幕瀏覽器來查看預覽。

來源

2014-05-20 10:46:03 blackhawk338

'@media screen和（min-width：1366px）'和@media（min-width：1366px）''有什麼區別？它只是讓我困惑。 – Learning

在第二個中你沒有定義你想要的屏幕寬度，這就是爲什麼在'@ media'標籤之後放置'screen'以便知道查看屏幕寬度的原因。 – blackhawk338

我會用一個盒子寫一個小腳本，給我一兩分鐘 – blackhawk338

響應的網站和媒體查詢

回答

相關問題