Question

我一直在尝试用简单的html和css实现媒体查询。但由于一些奇怪的原因，它不起作用。我试过它有或没有'viewport'元标记，不同的浏览器，几个断点等背景颜色响应，但主要问题是元素的大小（特别是宽度）。随着浏览器窗口缩小，大小不会（响应）缩小。我不知道这有什么问题。我错过了什么吗？如果有人告诉我可能的原因，那将是很有帮助的。

HTML：

`

<!DOCTYPE html>
<html>
    <head>
        <title>Media Query Practice_2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="media_Query2.css">
        <link rel="icon" type="image/jpg" href="image/f1202536.jpg">

    </head>

    <body>
        <div class="wrapper">
            <div class="header">
                <h2 style="text-align:center;">
                    Hello
                </h2>
            </div>
            <div class="mncontentWrapper">
                <div class="content_1 gap">
                    <p class="s">
                         The Atlantic was always moody and September storms had blown up from nowhere so that the great grey rollers had smashed constantly against the cliffs round Cape <a href="#Early">Trafalgar</a>. Today, however, the sea  has calm, with a soft north-westerley wind bringing up cloud that dropped a gauze veil long the coast.                   
                    </p>
                </div>
                <div class="content_2 gap">
                    <ol>
                        <li>Mango</li>
                        <li>Berry</li>
                        <li>Jack fruit</li>
                        <li>Banana</li>
                        <li>Lychee</li>
                        <li>Grape</li>
                        <li>Apple</li>
                        <li>Pineapple</li>
                        <li>Coconut</li>
                        <li>Avocado</li>

                    </ol>

                </div>
                <div class="content_3">
                    <p class="s">
                         The Atlantic was always moody and September storms had blown up from nowhere so that the great grey rollers had smashed constantly against the cliffs round Cape <a href="#Early">Trafalgar</a>. Today, however, the sea  has calm, with a soft north-westerley wind bringing up cloud that dropped a gauze veil long the coast.                   
                    </p>
                </div>
            </div>
            <div class="footer">
                <h3 style="text-align:center;">Media Query</h3>
            </div>
        </div>
    </body>
</html>`   
css code:

* {保证金：0;填充：0;}

.wrapper {

width:1200px;
min-height:1000px;
margin:0 auto;

}

.header {

background-image:;
min-height:150px;
background-color:lightgreen;
width:;
background-size:;

}

.mncontentWrapper {

min-height:800px;
width:100%;
padding-left:px;

}

.content_1 {

min-height:800px;
width:380px;
float:left;
background-color:AntiqueWhite;

}

.content_2{

min-height:800px;
width:380px;
float:left;
background-color:DarkCyan;
margin-left:;
}

.content_2 ol{
    margin-left:30px;
}

.content_3{

min-height:800px;
width:380px;
float:left;
background-color:Lavender;
margin-left:;

}

.gap{

margin-right:30px;
}

.footer{

clear:both;
min-height:50px;
background-color:LightSteelBlue;
}

@media only screen and (min-width: 520px) and (max-width: 1199px){

    .content_1{

        width:31%;

    }

    .content_2{
        width:33%;

    }

    .content_3{
        width:31%;
    }

}

@media only screen and（max-width：519px）{

 .content_1{

        width:100%;
        margin:0;
    }

    .content_2{

        width:100%;
        margin:0;

    }

    .content_3{
        width:100%;

    }

    .footer{

        width:100%;
        clear:;
    }
}

Answer 1

这是否接近你所追求的目标？
http://codepen.io/panchroma/pen/GqwdQk

HTML与您发布的完全一样。除了我将max-width:100%;添加到CSS的第5行的.wrapper类之外，CSS也是一样的。

如果没有这个编辑，.wrapper div的硬编码宽度为1200px，因此不能缩放以适应窄视口。

希望这有帮助！

媒体查询无法正常工作

1 个答案: