本文介绍了CSS媒体查询最小宽度/最大宽度不被调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图解决这个问题好几个小时，而且我把我的头发拉出来，不管我做什么，拒绝在媒体标签中调用CSS，我立即添加了最大宽度或最小宽度。为了测试，我制作了媒体标签，让身体变成红色，并将最小宽度缩小到可笑的程度。什么都没发生。如果我离开屏幕标签而没有其他任何东西，它会调用它
CSS：
@import url（reset.css）;
@charsetiso-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％;
保证金 - 右侧：5％;
背景：＃d1d1d1; / *旧浏览器* /
背景：-moz-linear-gradient（left，＃d1d1d1 0％，＃66a8d2 20％，＃66a8d2 80％，＃e5e5e5 100％）; / * FF3.6 + * /
背景：-webkit渐变（线性，左上，右上，停止颜色（0％，＃d1d1d1），停止颜色（20％，＃66a8d2），颜色 - 停止（80％，＃66a8d2），停止颜色（100％，＃e5e5e5））; / * Chrome，Safari4 + * /
background：-webkit-linear-gradient（left，＃d1d1d1 0％，＃66a8d2 20％，＃66a8d2 80％，＃e5e5e5 100％）; / * Chrome10 +，Safari5.1 + * /
背景：-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 + * /
背景：线性渐变（向右，＃d1d1d1 0％，＃66a8d2 20％，＃66a8d2 80％，＃e5e5e5 100％）; / * W3C * /
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃d1d1d1'，endColorstr ='＃e5e5e5'，GradientType = 1）; / * IE6-9 * /
}
/ *没有人需要选择导航栏* /
nav {
width：100％ ;
float：left;
背景颜色：＃0B61A4;
border-bottom：3px solid＃000;
职位：亲属;
-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;
职位：亲属;
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;
身高：100％;
padding：2px 3px;
margin-bottom：3px;
保证金：0;
display：block;
颜色：＃000;
text-decoration：none;
}
nav ul：在{
content：;
明确：两者;
display：block;
}
nav ul ul {
display：none;
background：rgb（63，146，210）;
位置：绝对;
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;
身高：50％;
职位：亲属;
}
nav ul ul li a {
color：＃000;
padding：15px;
text-align：center;
职位：亲属;
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结尾* /
/ * Butikk * /
表格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;
保证金：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;
身高：100％;
颜色：＃000;
font-family：cooper，times new roman，times，serif;
border-right：2px solid＃000;
}
#shoplist li：first-child a {
border-left：2px solid＃000;
}
/ *通用* /
.bigbutton {
位置：相对;
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;
颜色：＃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.dwtcodeOutsideHTMLIsLocked =false - >
< head>
< meta charset =iso-8859-1>
< 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 =stylesheettype =text / css>
< link rel =快捷图标href =img / favicon.ico>
< / head>
< body>
< nav>
< ul>
< li>< a href =butikk.html>< img src =img / Butikkicon.pngalt =Butikk>< / a>< / li>
< li>< a href =verksted.html>< img src =img / verkstedicon.pngalt =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>
< 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>< img src =img / download.png>< / li>< / ul>
< a name =Barnesykler> Barnesykler< / a>
< table width =1061border =0>
< tr>
Dynamite 20& rsquo;& rsquo; Girl 2013< / th>
< / tr>
< tr>
< th width =256height =156scope =row>
< img src =img / Jentesykkel.jpgwidth =227height =138align =left>
< / th>
< td style =vertical-align：top;宽度= 795 >
En pen og praktisk sykkel med fine farger。用于b& aring; de landevei和terreng的Perfekt。过路人，我8-12& aring; r。
< br>
Pris：1.699， -
< / td>
< / tr>
< tr>
< td>< / td>
< / tr>
< tr>
< th height =173scope =row>< img src =img / Guttesykkel 16.jpgalt =Guttete sykkelwidth =227height =152 ALIGN = 左 >< /第>
< td>恩& oslash; ff og holdbar sykkel som passer til
de fleste anledninger med t& oslash; ffe farger ogst& oslash; ttehjul for de som trenger hjelp。过路人我是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>
< td>
恩上帝sykkel med gode bruksmuligheter;
funker bra b& aring; de p& aring; landeveien og i skog og mark。
用于de som er kommet forbi nybegynner。
换水器和过滤器的传球员我是alderen 10-14& aring; r。 <峰; br>
Pris：3.599， -
< / td>
< / tr>
< / table>
< br>
< hr>
< h1>< a name =Temposykler> Temposykler< / a>< / h1>
< table width =1063border =0>
< tr>
< th width =249scope =col> Norcom Straight 1.1 2014< / th>
< th width =804scope =col>& nbsp;< / th>
< / tr>
< tr>
< td> En av markedes desidert sterkeste sykler，
en temposyklers dr& oslash; m。 Sykkelen er utstyr
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.jpgalt =Landeveissykkelwidth =201height =121align =left>
En flott landeveissykkel som har al alt du er ute
etter。 Denne sykkelen veier裸露6.2公斤！
< br>
Pris：34.999， -
& nbsp;
< hr>
< h1>< a name =Terrengsykler> Terrengsykler< / a>< / h1>
< h1> Corratec Revolution carbon terrengsykkel< / h1>
< img src =img / Terrengsykkel1.jpgalt =Terrengsykkelwidth =191height =128align =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直到b& aring; de
konkurranse和de som er ekstra dedikerte。< br>
Pris：14.199， -
< h1>& nbsp;< / h1>
& nbsp;
< h1> Corractec X-Vert S.04< / h1>
< img src =img / Terrengsykkel2.jpgalt =Terrengsykkel2width =188height =118align =left>
Perfekt sykkel，rundbane og
mosjon。 Lever opp til alle用餐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.jpgalt =El-syklerwidth =186height =117align =left>
Powerflex girder muligheten for et ekstra dytt
opp den litt tunge bakken。只需
即可使用24V / 250Watt
电机和Panasonic Li-Ion 25,2 V PCB电池。< br>
Pris：9.999， -
& nbsp;
& nbsp;
< br>
< / div>
<！ - InstanceEndEditable - >
< / body>
<！ - InstanceEnd - >< / html>
原谅代码的绝对混乱，但在丢失我之前我没有时间清理它介意这个问题。
解决方案
您没有指定像素值。尝试：
@media屏幕和（最小宽度：500px）{
{body {background-color：＃ FF0000;}
}
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’’ 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>
Excuse the absolute mess of code, but i haven't had time to clean this up before losing my mind over this issue.
解决方案
You haven't specified a pixel value. Try:
@media screen and (min-width:500px){
{body{background-color:#FF0000;}
}
这篇关于CSS媒体查询最小宽度/最大宽度不被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！