[英]CSS media queries min-width/max-width not being called
我已經嘗試解決這個問題幾個小時了,我把頭發拉了出來,無論我做什么,它都拒絕在媒體標簽中調用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>
請原諒代碼的絕對混亂,但我沒有時間清理它,然后在這個問題上失去理智。
您尚未指定像素值。 嘗試:
@media screen and (min-width:500px){
{body{background-color:#FF0000;}
}
要擴展上一個答案,您沒有指定任何單位,它不需要是像素。
您可以使用絕對長度'cm','mm','in','pt','pc'或'px',字體相對長度'em','ex','ch'或'rem'或視口百分比長度:'vw','vh','vmin'或'vmax'。 這只是長度,您可以在媒體查詢中使用許多其他單位,包括像素密度,設備方向,設備類型等。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.