CSS media queries min-width/max-width not being ca

问题:

I've tried to fix this for hours and i'm pulling my hair out, no matter what i do it refuses to call the CSS in the media tag the instant i add max-width or min-width. To test, i made the media tag make the body red and reduced min-width to something ridiculously low. Nothing happens. If i leave the screen tag and nothing else, it calls it

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&rsquo;&rsquo; Girl 2013</th>
        <th scope="col">&nbsp;</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&aring;de landevei og terreng. Passer for jenter i alderen 8-12 &aring;r. 
            <br>
            Pris: 1.699,- 
        </td>
      </tr>
      <tr>
        <th scope="row">Fazer  16&rsquo;&rsquo; 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&oslash;ff  og holdbar sykkel som passer til
            de fleste anledninger med t&oslash;ffe farger ogst&oslash;ttehjul  for de som trenger hjelp. Passer for gutter i alderen 6-10 &aring;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&aring;de p&aring; landeveien og i skog og  mark.
           For de som er kommet forbi nybegynner.
           Passer for gutter og jenter i  alderen 10-14 &aring;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">&nbsp;</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&oslash;m. Sykkelen er utstyr
           med topnoch utstyr. Brukes av verdenseliten 
        som Matt Reed og Cameron Dye. 
        Pris: 49.999,-</td>
      </tr>
    </table>
    &nbsp;
    <hr>
    &nbsp;
    <h1><a name="Landeveissykler">Landeveissykler</a></h1>
    &nbsp;
    <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,-
&nbsp;
<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&aring;r du vil 
og  hvor fort du vil. Ypperlig til b&aring;de 
konkurranse og for de som er ekstra  dedikerte.<br>
  Pris: 14.199,-
<h1>&nbsp;</h1>
&nbsp;
<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&aring;de  
som mosjonist og som utd&oslash;ver.
 En sykkel vi sterkt anbefaler. <br>
  Pris: 8.999,-
<hr>
&nbsp;
<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,-
&nbsp;
&nbsp;
<br>

</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Excuse the absolute mess of code, but i haven't had time to clean this up before losing my mind over this issue.

回答1:

You haven't specified a pixel value. Try:

@media screen and (min-width:500px){
{body{background-color:#FF0000;}
}

回答2:

To expand on the previous answer, you didn't specify any unit, it doesn't need to be pixels.

You could use absolute lengths ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, or ‘px’, font-relative lengths ‘em’, ‘ex’, ‘ch’, or ‘rem’ or the viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’ or ‘vmax’. And that's just lengths, there are many other units you can use in media-queries including pixel density, device orientation, device type, etc.