媒體查詢根本不起作用

首先，我是響應式設計的全職新手。我在這裏遇到了麻煩。我的媒體查詢不起作用，我想我已經嘗試了一切。有人可以發現問題嗎？先謝謝你！媒體查詢根本不起作用

HTML：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css"/> 
</head> 

<body> 
<div class="header"> 

</div> 

<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 
<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 

<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 

<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 

<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 

<div class="imageContainer"> 
    <a href="#" class="wrapper"> 
     <span class="text"> 
      lorem ipsum 
     </span> 
     <img src="img/5.jpg" /> 
    </a> 
</div> 

<div class="clearfloats"></div> 

<div class="footer"> 

</div> 

</body> 
</html>

CSS：

body { 
    margin:0; 
    padding:0; 
    background:#000000; 
} 

.header { 
    height:170px; 
    width:auto; 
    padding-top:30px; 
    background:#FFFFFF; 
} 

.imageContainer { 
    position: relative; 
    width: 33.333%; 
    padding-bottom: 26%; 
    float: left; 
    height: 0; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    z-index:1; 
} 

.clearfloats { 
    clear:both; 
} 

.footer { 
    height:200px; 
    width:auto; 
    background:#000; 
} 

@media screen and (max-width 1024px) { 
    .imageContainer { 
    position: relative; 
    width: 50%; 
    padding-bottom: 36%; 
    float: left; 
    height: 0; 
    } 
}

來源

2014-10-16 GetGalax

你在你的媒體查詢缺少:。另外，爲了安全，在支架之間留出空間。

@media screen and (max-width:1024px)

來源

2014-10-16 15:10:44 somethinghere

ARRGH！當然！非常感謝：） – GetGalax 2014-10-16 15:23:41

媒體查詢根本不起作用

回答

相關問題