Question

首先，我是响应式设计的新秀。我在这里遇到了麻烦。我的媒体查询不起作用，我认为我尝试了一切。有谁能发现这个问题吗？提前谢谢！

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;
    }
}

Answer 1

您的媒体查询中缺少:。另外，为了安全起见，在支架之间留出空间。

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

媒体查询根本不起作用

1 个答案: