Question

我试图为我的网站设置媒体查询以在平板电脑上显示（然后我必须为智能手机再做一次）...我的所有css都会在媒体查询除外的情况下进行验证。我查看了w3C网站，我的教科书和css-tricks.com，尽管我觉得我跟着他们的例子我的查询没有验证，错误是＃34;只有0可以是一个长度。你必须在你的电话号码后加一个单位。＆＃34;我的书（和互联网）说保证金：0;填充：0;。当我放入任何类型的单位时它会说同样的事情。这就是我现在所拥有的：

header, nav, main, footer { display: block; }
body { background-color: #FFFFFF;
      background-image: url(background.jpg);
      color: #666666;
      font-family: Verdana, Arial, sans-serif;
}
#wrapper { width: 80%;
           min-width: 700px;
           max-width: 1024px;
           margin-right: auto;
           margin-left: auto;
           background-color: #90C7E3;
           box-shadow: 3px 3px 3px #666666;
}
header { background-color: #000033;
       color: #FFFFFF;
       font-family: Georgia, serif;
}
h1 { line-height: 200%;
    background-image: url(sunset.jpg);
    background-repeat: no-repeat;
    background-position: right;
    padding-left: 20px; 
    height: 72px;
    margin-bottom: 0;
}
nav { font-weight: bold;
     padding: 5px;
     float:left;
     width: 160px;
     padding: 20px 5px 0 20px;
}
nav a { text-decoration: none; }
nav a:link { color: #000033; }
nav a:visited { color: #344873 }
nav a:hover { color: #FFFFFF; }
nav ul { list-style-type: none;
       margin: 0;
       padding-left: 0; 
}
h2 { color: #3399CC;
    font-family: Georgia, serif;
}
dt { color: #000033;
    font-weight: bold; 
}
.resort { color: #000033;
          font-size: 1.2em;
}
footer { font-size: 0.70em;
       text-align: center;
       font-style: italic;
       padding: 10px;
       margin-left: 170px;
       background-color: #FFFFFF;
}
h3 { color: #000033; 
}
main { padding-left: 20px;
        padding-right: 20px;
        background-color: #FFFFFF;
        margin-left: 170px;
        padding-top: 1px;
        padding-bottom: 1px;
}
main img { float: left;
           padding-right: 20px;
           padding-bottom: 20px;
}
main ul { list-style-position: inside; }
.clear { clear: both; }

@media only screen and (max-width: 1024 px) {
    body {margin: 0; 
        Padding: 0;
        background-image: none; }
    #wrapper {width: auto;
        min-width: 0px;
        margin: 0;
        box-shadow: none; }
    h1 {margin: 0; }
    nav {display: block;
        float: none;
        width: auto;
        padding: 0.5em; }
    nav li {display: inline-block; }
    nav a {padding: 1em; }
    main {padding: 1em;
        margin-left: 0px;
        font-size: 90%;  }
    footer {margin: 0; }

 }

这是我的HTML：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pacific.css" media="screen">
<link rel="stylesheet" href="pacificprint.css" media="print">
<link rel="stylesheet" href="pacific.css" media="only screen and (max-width:1024px">
</head>
<body>
<div id="wrapper">
<header><h1>Pacific Trails Resort</h1></header>
<nav>
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="yurts.html">Yurts</a></li>
  <li><a href="activities.html">Activities</a></li>
  <li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<main>
<h2>Enjoy Nature in Luxury</h2>
<img src="coast.jpg" alt="scenic ocean coastline" width="320" height="250">
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast.
  Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
  <li>Private yurts with decks overlooking the ocean</li>
  <li>Activities lodge with fireplace and gift shop</li>
  <li>Nightly fine dining at the Overlook Cafe</li>
  <li>Heated outdoor pool and whirlpool</li>
  <li>Guided hiking tours of the redwoods</li>
</ul>
  <div class="clear">Pacific Trails Resort<br>
        12010 Pacific Trails Road<br>
        Zephyr, CA &nbsp;95555<br>
  <br> 
  888-555-5555
  <br>
  <br>
  </div>
</main>
<footer>Copyright &copy; 2014 Pacific Trails Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>

＆＃13;

Answer 1

您必须在1024：@media only screen and (max-width: 1024px)

之后删除空格

我的媒体查询无法验证

1 个答案: