html - 我的媒体查询不会验证-6ren

html - 我的媒体查询不会验证

转载作者：太空宇宙更新时间：2023-11-04 02:40:17

25

4

我正在尝试为我的网站设置一个媒体查询以在平板电脑上显示(然后我必须为智能手机再做一个)...除了媒体查询之外，我的所有 css 都经过验证。我查看了 w3C 网站、我的教科书和 css-tricks.com，尽管我觉得我正在按照他们的示例进行操作，但我的查询无法验证并且错误是“只有 0 可以是一个长度。你必须把你号码后面的一个单位。”我的书(和互联网)说 margin: 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:

<!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>

最佳答案

您必须删除 1024 之后的空格:@media only screen and (max-width: 1024px)

关于html - 我的媒体查询不会验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34864390/

25

4

0

文章推荐： javascript - 如何删除jquery sortable中的元素？

文章推荐： Node.js 不更新客户端

文章推荐： python - 在python中拆分文本文件

文章推荐： javascript - 将 Bootstrap 模式与 javascript 链接起来

html - 媒体=全部 vs 媒体=屏幕
似乎最近我看到越来越多的人开始在他们的样式表中使用 media="all" 而不是 media="screen"。我的问题是什么时候应该使用 media="all" 而不是 media="scree
instagram - 媒体 Instagram 端点不起作用 - 媒体 ID 无效
我正在尝试使用 https://www.instagram.com/developer/endpoints/media/ ，但对于我使用的每个媒体 ID，我总是得到相同的结果: { "meta
HTML/CSS @媒体
哟，我正在为服务器制作一个 MOTD 供最终用户阅读。但是，对于使用较小显示器的用户来说，它看起来非常压缩，例如，当分辨率为 1280x1040 时，它会被拉低。我不熟悉 CSS 中的 @media
CSS 媒体查询(@媒体)
我在我的 CSS 文件中使用了 @media screen 而不是 (-webkit-min-device-pixel-ratio:0)。我的问题是关于指定的值，即在这种情况下为“0”。值的变化将如何
机器人:媒体 Controller
我正在播放 Activity 中的视频，我需要显示/隐藏顶部栏 View 以及媒体 Controller 。所以当媒体 Controller 在屏幕上时，我的顶部 View 应该是可见的，当媒体 Co
小部件中的 Wordpress 媒体 uploader
我在我的 WordPress 主题中创建了一个小部件来显示图像。到目前为止，小部件可以工作，我可以输入值并在前端显示这些值。当我选择一个小部件并将其放入小部件区域时，媒体上传按钮不起作用。在 Wor
iphone - 标记内的MWFeedParser标记(媒体:缩略图)
我正在使用MWFeedParser从此处读取Youtube原子供稿:here xml代码: 我如何获取媒体的网址:缩略图？我试图更改MWFeedParser.m 由此: else if ([cu
Instagram API/媒体/搜索最大计数参数？
当使用 Python 向 Instagram API 发出 GET 请求时，传递所需的变量，如下所示 photos = api.media_search(lat=latitude, lng=longi
Android 媒体 Controller 在失去焦点时隐藏
我正在使用与媒体播放器关联的媒体 Controller 来播放声音。问题是媒体 Controller 一旦失去焦点就会隐藏起来。我有一个按钮，按下时会播放声音，媒体 Controller 会出现在屏幕
android - 媒体 Controller 隐藏但媒体播放器继续播放
我有一个媒体播放器并与它关联了一个媒体 Controller 。控件工作正常。我遇到了两个问题: 当媒体 Controller 获得焦点时，即用户触摸它然后触摸屏幕的另一部分时，媒体 Control
java - 媒体 Controller 不工作
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
对话框中的 Android 媒体 Controller
我在对话框中显示一个 VideoView 并向其附加一个媒体控件。但是当我尝试点击媒体控件(播放、搜索栏等)时，对话框会消失。媒体控制按钮不会被点击，而是将点击注册为 Dialog 的 Outsi
html - 打印时隐藏 HTML 媒体
我目前正在使用 HTML 编写可打印文档，它将显示从数据库中提取的数据。我的想法是我将使用 HTML/CSS 使文档看起来不错，但它将专门用于打印。文档的布局使用表格来控制数据库中数据的显示方式。
css - 媒体 ="print"外部链接不起作用
我需要在网络应用程序中打印我的报告。我有在我的代码中。但它不应用任何样式。另一方面，如果我使用在文档中编写 print.css 代码一切正常。怎么了？最佳答案也许你在主样式之前插入打印样式
jquery - css 媒体 - 屏幕宽度不一致
CSS html{ overflow-y:scroll; } js function showW(){ var a=($(window).width()); $('#
css - 媒体 ="all"CSS 是否会覆盖所有内容？
我编写了一个 Chrome 扩展程序，其中一个功能是您可以在您所在的页面中调出一个帮助面板，其中包含其使用指南。这个帮助面板是通过JS插入到页面中的，它的CSS都是通过$('#selector_for
linux - 模拟 WORM 媒体
我需要为 WORM 媒体开发归档软件。这种类型的媒体允许通常的访问操作:读取、写入，但文件一旦写入，就无法修改或删除。因为这样的媒体可能很昂贵，我想知道如何在开发阶段为测试创建一个假的 WORM
Android 媒体 Controller 短时间显示
下面的这个 Activity 工作正常，但 mediaController 仅在我单击屏幕时显示。第二个问题是媒体 Controller 只显示 3 秒。我应该怎么做才能消除这个问题？ public
android - 媒体 Controller 定位
我正在使用 VideoView 播放本地 mp4，我也在使用 MediaController。媒体控制栏未显示在我的视频剪辑下方，而是显示在屏幕中间。我使用 setAnchorView 将其附加到我的
android - 媒体 Controller 不工作
我的布局包含 videoView 还有java代码中的Medicontrolleri: final MediaController mediaCont

首页

博学

6Ren·AI

商城

html - 我的媒体查询不会验证