我已经尝试解决这个问题好几个小时了,我把头发拉出来了,无论我做什么,它都拒绝在我添加最大宽度或最小宽度的那一刻调用媒体标签中的 CSS。为了测试,我将媒体标签设置为红色,并将最小宽度减小到低得离谱的程度。没发生什么事。如果我留下屏幕标签而没有别的,它会调用它
CSS:
@import url("reset.css");
@charset "iso-8859-1";
@font-face {
font-family: cooper;
src: url('../resources/CooperBlackStd.otf');
}
@media screen and (min-width:500){
body{background-color:#FF0000;}
}
body {
line-height: 28px;
}
#pagecenter {
margin-left:5%;
margin-right:5%;
background: #d1d1d1; /* Old browsers */
background: -moz-linear-gradient(left, #d1d1d1 0%, #66a8d2 20%, #66a8d2 80%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d1d1d1), color-stop(20%,#66a8d2), color-stop(80%,#66a8d2), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to right, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
}
/*No one needs to select the navigation bar*/
nav {
width:100%;
float:left;
background-color:#0B61A4;
border-bottom:3px solid #000;
position:relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav > ul {
/*padding-left:10px;*/
display:block;
list-style:none;
position:relative;
float:left;
text-align:center;
margin-left:15em;
}
nav > ul li {
float:left;
}
nav ul li:hover{
background:rgb(63, 146, 210);
}
nav > ul li a {
position:relative;
height:100%;
padding: 2px 3px;
margin-bottom:3px;
margin:0;
display:block;
color:#000;
text-decoration:none;
}
nav ul:after {
content: "";
clear:both;
display:block;
}
nav ul ul {
display:none;
background:rgb(63, 146, 210);
position:absolute;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
z-index:5;
}
nav ul ul li {
float:none;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:50%;
position:relative;
}
nav ul ul li a {
color: #000;
padding:15px;
text-align:center;
position:relative;
font-family:cooper, times new roman, times, serif;
}
nav ul ul li a:hover {
background-color: rgb(102, 163, 210);
}
nav ul li:hover > ul {
display:block;
}
#logo {
border-left:3px solid #000;
border-right:3px solid #000;
margin-left:-3px;
padding:2px 3px;
height:inherit;
}
#logo img {
height:96px;
}
/*Navbar end*/
/*Butikk*/
table tr td {
vertical-align:top;
}
#shoplist {
width:100%;
float:left;
background-color:rgb(63, 146, 210);
border-bottom:2px solid #000;
}
#shoplist ul {
list-style:none;
margin:0 8%;
background-color:rgb(63, 146, 210);
text-align:center;
}
#shoplist li {
float:left;
}
#shoplist li a {
position:relative;
display:block;
padding:8px 25px;
text-decoration:none;
height:100%;
color:#000;
font-family:cooper, times new roman, times, serif;
border-right:2px solid #000;
}
#shoplist li:first-child a {
border-left:2px solid #000;
}
/* Universal */
.bigbutton {
position:relative;
list-style:none;
float:left;
background-color:rgb(209, 209, 209);
border:2px solid #000;
margin:5px 5px;
}
.bigbutton li {
float:left;
height:auto;
}
.bigbutton li a {
position:relative;
display:block;
padding:6px 6px 6px 25px;
text-decoration:none;
color:#000;
font-family:cooper, times new roman, times, serif;
}
.bigbutton li img {
height:32px;
padding:0px 15px 0px 8px;
}
HTML:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/maintemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Pedalsport</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- InstanceEndEditable -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<nav>
<ul>
<li><a href="butikk.html"><img src="img/Butikkicon.png" alt="Butikk"></a></li>
<li><a href="verksted.html"><img src="img/verkstedicon.png" alt="tekst"></a></li>
<li><a href="sykkelsti.html"><img src="img/mapicon.png"></a>
<ul>
<li><a href="sykkelsti.html">Svartvann</a></li>
<li><a href="sykkelsti2.html">Brønnøya</a></li>
<li><a href="sykkelsti3.html">Bogstad</a></li>
<li><a href="sykkelsti4.html">Brunkollen</a></li>
</ul>
</li>
<li id="logo"><a href="index.html"><img src="img/logo.png"></a></li>
<li><a href="Pedalbladet.html"><img src="img/magasinikon.png"></a></li>
<li><a href="Pedalklubben.html"><img src="img/klubbikon.png"></a></li>
<li><a href="omoss.html"><img src="img/abouticon.png"></a></li>
</ul>
</nav>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="shoplist">
<ul>
<li><a href="#Barnesykler">Barnesykler</a></li>
<li><a href="#Temposykler">Temposykler</a></li>
<li><a href="#Landeveissykler">Landeveissykler</a></li>
<li><a href="#Terrengsykler">Terrengsykler</a></li>
<li><a href="#El-sykler">El-sykler</a></li>
</ul>
</div>
<div id="pagecenter">
<h1>Butikk</h1>
<ul class="bigbutton"><li><a href="Produktmagasin for web.pdf">Produktmagasin som PDF</a></li><li><img src="img/download.png"></li></ul>
<a name="Barnesykler">Barnesykler</a>
<table width="1061" border="0">
<tr>
<th scope="col">
Dynamite 20’’ Girl 2013</th>
<th scope="col"> </th>
</tr>
<tr>
<th width="256" height="156" scope="row">
<img src="img/Jentesykkel.jpg" width="227" height="138" align="left">
</th>
<td style="vertical-align:top;" width="795">
En pen og praktisk sykkel med fine farger. Perfekt for både landevei og terreng. Passer for jenter i alderen 8-12 år.
<br>
Pris: 1.699,-
</td>
</tr>
<tr>
<th scope="row">Fazer 16’’ Boy</th>
<td></td>
</tr>
<tr>
<th height="173" scope="row"><img src="img/Guttesykkel 16''.jpg" alt="Guttete sykkel" width="227" height="152" align="left"></th>
<td>En tøff og holdbar sykkel som passer til
de fleste anledninger med tøffe farger ogstøttehjul for de som trenger hjelp. Passer for gutter i alderen 6-10 år. <br>
Pris: 1.799,-
</td>
</tr>
<tr>
<th scope="row">Superior Team Issue 24 Deore</th>
<td></td>
</tr>
<tr>
<th scope="row"><img src="img/Guttesykkel2.jpg" alt="http://www.birksport.no/images/birksport%20images/Superior%20Team%2024%20Issue.jpg" width="222" height="123" align="left"></th>
<td>
En god sykkel med gode bruksmuligheter;
funker bra både på landeveien og i skog og mark.
For de som er kommet forbi nybegynner.
Passer for gutter og jenter i alderen 10-14 år. <br>
Pris: 3.599,-
</td>
</tr>
</table>
<br>
<hr>
<h1><a name="Temposykler">Temposykler</a></h1>
<table width="1063" border="0">
<tr>
<th width="249" scope="col">Norcom Straight 1.1 2014</th>
<th width="804" scope="col"> </th>
</tr>
<tr>
<th scope="row"><img src="img/Temposykkel.jpg" alt="Temposykkel" width="219" height="146" align="left"></th>
<td>En av markedes desidert sterkeste sykler,
en temposyklers drøm. Sykkelen er utstyr
med topnoch utstyr. Brukes av verdenseliten
som Matt Reed og Cameron Dye.
Pris: 49.999,-</td>
</tr>
</table>
<hr>
<h1><a name="Landeveissykler">Landeveissykler</a></h1>
<h1>Fuji Altamira SL</h1>
<img src="img/Landeveissykkel.jpg" alt="Landeveissykkel" width="201" height="121" align="left">
En flott landeveissykkel som har alt du er ute
etter. Denne sykkelen veier bare 6.2kg!
<br>
Pris: 34.999,-
<hr>
<h1><a name="Terrengsykler">Terrengsykler</a></h1>
<h1>Corratec Revolution carbon terrengsykkel</h1>
<img src="img/Terrengsykkel1.jpg" alt="Terrengsykkel" width="191" height="128" align="left">
Forskjellen mellom god og perfekt. Denne
sykkelen vil ta deg hvor du vil, når du vil
og hvor fort du vil. Ypperlig til både
konkurranse og for de som er ekstra dedikerte.<br>
Pris: 14.199,-
<h1> </h1>
<h1>Corractec X-Vert S.04</h1>
<img src="img/Terrengsykkel2.jpg" alt="Terrengsykkel2" width="188" height="118" align="left">
Perfekt sykkel, veldesignet for rundbane og
mosjon. Lever opp til alle dine behov, både
som mosjonist og som utdøver.
En sykkel vi sterkt anbefaler. <br>
Pris: 8.999,-
<hr>
<h1><a name="El-sykler">El-sykler</a></h1>
<h1>Superior Powerflex 24 Men</h1>
<img src="img/El-sykkel.jpg" alt="El-sykler" width="186" height="117" align="left">
Powerflex gir deg muligheten for et ekstra dytt
opp den litt tunge bakken. En meget
tilpasninsdyktig sykkel med 24V/ 250Watt
motor og Panasonic Li-Ion 25,2 V PCB batteri.<br>
Pris: 9.999,-
<br>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
请原谅代码的绝对混乱,但我还没有时间清理它,然后就对这个问题失去了理智。