【发布时间】：2018-03-11 11:24:11
【问题描述】：
如果这个问题已经得到解答，我很抱歉，但我已经查看了一个多小时的数十个线程，似乎没有任何问题可以解决我的问题。
我正在为学校做一个项目。我坚持的指令状态：为屏幕类型编写媒体查询，检查视口宽度是否为 959 像素或更小。在此媒体查询中，将 section 中的 h1 元素的字体大小减小到 135%，并将 section 和 side 中的 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>【问题讨论】：
标签： responsive-design media-queries