【发布时间】：2016-12-13 09:00:28
【问题描述】：
我一直在尝试用简单的 html 和 css 实现媒体查询。但由于一些奇怪的原因，它不起作用。我已经尝试过使用或不使用“视口”元标记、不同的浏览器、几个断点等。背景颜色响应，但主要问题在于元素的大小（特别是宽度）。随着浏览器窗口的缩小，尺寸不会（响应）缩小。我不知道这有什么问题。我错过了什么吗？如果有人告诉我可能的原因是什么，那将是很大的帮助。
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:
*{margin:0;padding:0;}
.包装器{
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 仅屏幕和（最大宽度：519px）{
.content_1{
width:100%;
margin:0;
}
.content_2{
width:100%;
margin:0;
}
.content_3{
width:100%;
}
.footer{
width:100%;
clear:;
}
}
【问题讨论】：