如果有人回答这个问题，我很抱歉，但是我看了几个小时的线程超过一个小时，似乎没有解决我的问题。
我正在为学校做一个项目。我坚持使用的指令：对屏幕类型进行媒体查询编码，检查视口宽度是否为959像素或更小。在此媒体查询中，将该部分中h1元素的字体大小减小到135％，并将该部分中h2元素的字体大小减小到120％。
所以，我编写了一个媒体查询来完成这一操作，正如您可以在我的代码底部看到的那样。我注意到语法高亮不适用于Notepad ++，因为媒体查询无法被识别（我在线程上找到了一个！）但同一个线程声明媒体查询仍然可以在我的浏览器中工作，那就是问题。它不起作用。当我使用Chrome中的开发者工具查看它时，我的媒体查询格式实际上被我的原始样式覆盖了。我在HTML上更改了元标记的顺序，我将查询移到了CSS的顶部和底部。什么都行不通。我希望有人能告诉我这是什么问题???请！
/* styles for 960px and above */
/* the styles for the elements */
* {
margin: 0;
padding; 0;
}
html{
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 960px;
margin: 0 auto;
border: 3px solid #931420;
background-color: #fffded;
}
/* the styles for the header */
header {
border-bottom: 3px solid #931420;
padding: 1.5em 0em 2em 0em;
background-image:
-webkit-linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
background-image:
linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
}
header img {
float: left;
padding: 0 3.75%;
}
header h2{
font-size: 170%;
color: #800000;
}
header h3{
font-size: 130%;
font-style: italic;
}
.shadow {
text-shadow: 1px -1px 2px #800000;
}
/* the styles for the navigation menu format */
#nav_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul li{
float: left;
width: 20%;
}
#nav_menu a {
display: block;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #800000;
color: white;
font-weight: bold;
text-decoration: none;
}
.current{
color: yellow;
}
/* the styles for the navigation menu operation */
#nav_menu ul ul{
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after {
content: "";
display: block;
clear: both;
}
#nav_menu ul ul li{
float: none;
width: 192px;
}
/* the styles for the section */
section{
width: 65.625%;
float: right;
padding: 0 2.5% 2.5% 2.5%;
}
aside {
float: right;
width: 26.875%;
padding: 0 0 20px 2.5%;
}
aside h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
aside h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
aside img{
padding: .5em 0 1em 0;
}
aside a:focus{
font-style: italic;
}
aside a:hover{
font-style: italic;
}
main {
clear: left;
padding: 0;
}
section h1{
font-size: 150%;
padding: .5em 0 .25em 0;
margin: 0;
}
article{
padding: .5em 0 .5em 0;
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
article img{
float: right;
border: 1px solid black;
margin: 0 0 2.5em 1em;
}
section h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
section h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
section a:focus{
font-style: italic;
}
section a:hover{
font-style: italic;
}
section p{
padding: 0 0 .5em 0;
}
section blockquote{
padding: 0 2em;
font-style: italic;
}
section ul{
padding: 0 0 .25em 1.25em;
}
section li{
padding: 0 0 .35em 0;
}
/* the styles for the footer */
footer{
padding: 0;
margin: 0;
clear: both;
}
footer p{
text-align: center;
background-color: #931420;
color: white;
padding-top: 1em;
padding-bottom: 1em;
}
/* styles for 959px or less */
@media only screen and (max-width: 959px;){
body section h1{
font-size: 130%;
}
body section h2, aside h2{
font-size: 120%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall Logo" height="80">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Celebrating our <em class="shadow">75<sup>th</sup></em> Year</h3>
</header>
<nav id="nav_menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li><a href="speaker.html">Speakers</a></li>
<li><a href="luncheons.html">Luncheons</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="about.html">About Us</a>
<ul>
<li><a href="history.html">Our History</a></li>
<li><a href="directors.html">Board of Directors</a></li>
<li><a href="pastspeakers.html">Past Speakers</a></li>
<li><a href="contact.html">Contact Information</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<section>
<h2>Our Mission</h2>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
<h1>Speaker of the Month</h1>
<article>
<h2>Fossil Threads in the Web of Life</h2>
<br><img src="images\sampson_dinosaur.jpg" alt="Sampson Dinosaur" max-width="40%" min-width="150px">
<h3>February 15, 2012<br>
Scott Sampson</h3>
<br>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.
<br>
<a href="speakers/sampson.html">Read more.</a> <b>Or meet us there!<b></p>
</article>
<h2>Our Ticket Packages</h2>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section>
<aside>
<h2>Guest speakers</h2>
<h3>October</h3>
<a href="speakers/toobin.html">Jeffrey Toobin</a><br>
<img src="images/toobin75.jpg" alt="Jeffrey Toobin" height="75">
<h3>November</h3>
<a href="speakers/sorkin.html">Andrew Ross Sorkin</a><br>
<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin" height="75">
<h3>January</h3>
<a href="speakers/chua.html">Amy Chua</a><br>
<img src="images/chua75.jpg" alt="Amy Chua" height="75">
<h3>February</h3>
<a href="speakers\sampson.html">Scott Sampson<a/><br>
<img src="images/sampson75.jpg" alt="Scott Sampson" height="75">
</aside>
</main>
<footer>
<p>© 2015, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
这里有分号
@media only screen and (max-width: 959px;){
删除它，它将按预期运行。我不知道Notepad ++的设置，但我建议让编辑器突出显示这样的小问题。或者只是使用像jsfiddle这样的东西。
HTML和CSS中存在许多问题，例如未关闭的标记，使用 b 而不是 strong ，您的CSS填充正在使用分号而不是冒号。