只有一個媒體查詢正在工作。任何人都可以建議其他人如何工作？

我有一個簡單的網頁與兩個CSS媒體查詢。當我調整瀏覽器大小時，第一個媒體查詢觸發，但我無法讓另一個工作。順序似乎是適當的，我的語法也是如此。有沒有人有任何想法？只有一個媒體查詢正在工作。任何人都可以建議其他人如何工作？

<!DOCTYPE html> 
<html lang='en'> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>McCann Echo Torre Lazur</title> 
<style> 

/********************************************************************************** 
* Structure 
**********************************************************************************/ 

body: { 


} 

#wrapper { 
    width: 960px; 
    min-height: 500px; 
    border: 1px solid black; 
    padding: 2px; 


} 

#logo { 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

.bioinfo { 
    border: 1px solid black; 
    display: inline-block; 
    width: 315px; 
} 

ul { 
} 

/********************************************************************************** 
* Media Queries 
**********************************************************************************/ 


/* Screens with resolution less than 1024px width */ 
@media screen and (max-width: 1024px) { 
    .bioinfo { 
     width: 49%; 
     border-color:#ff0000; 
    } 
    #wrapper { 
     width: 100%; 
    } 
} //end media screen 

/* Screens with resolution less than 480px width */ 
@media screen and (max-width: 700px) { 
    .bioinfo { 
     width: 95%; 
     border-color:#ffffff; 
    } 
    #wrapper { 
     width: 100%; 
    } 
} 



</style> 


</head> 
<body> 
<div id='wrapper'> 
<header> 
    <div id='logo'>Logo Here</div> 
</header> 

    <div id='bios'> 
     <div class='bioinfo'>Bio 1</div> 
     <div class='bioinfo'>Bio 2</div> 
     <div class='bioinfo'>Bio 3</div> 
     <div class='bioinfo'>Bio 4</div> 
     <div class='bioinfo'>Bio 5</div> 
     <div class='bioinfo'>Bio 6</div> 
    </div> 



<div> 
</body> 
</html>

來源

2012-10-18 user1717344

您的（代碼）評論與媒體查詢中的值之間存在差異。（480對700）這是問題嗎？如果沒有，您是否嘗試將第二個媒體查詢塊放在第一個之前？ –

是的，我不關心評論中的像素。當我調整瀏覽器（Chrome或Safari）的大小時，1024px @media屏幕會觸發，另一個則不會。我已經改變了順序，只有1024px的作品。 – user1717344

//end media screen不是有效評論。刪除它，這工作。

CSS註釋使用/* */語法。

來源

2012-10-18 21:45:22 bookcasey

我是個白癡！非常感謝！！！！！ – user1717344

如果這回答您的問題，請在回答旁邊的複選標記上標記。你應該爲你所有的問題這樣做，我只是這樣說，因爲Oded似乎已經回答了你的[問題]（http://stackoverflow.com/questions/12710479/how-do-i-establish-a-sql - 查詢這個多對多表），你還沒有標記它。回答標記問題是成爲Stackoverflow的公民的一部分！ – bookcasey

好的，我會這樣做的。對不起，我是Stackoverflow的新手。 – user1717344

只有一個媒體查詢正在工作。任何人都可以建議其他人如何工作？

回答

相關問題