Question

我正在对一个类进行首次媒体查询，对我来说，代码看起来像我们给出的示例，但是当我使用开发人员工具在Chrome上对其进行测试时，它没有响应。我只是试图使其在电话上查看时列表为垂直（阻止），而在更大的屏幕上查看时为水平（内联阻止）。谁能帮我看看我做错了什么？

body {
  font-family: 'Ruslan Display';
}

ul {
  background: #3399ff;
  padding: 20px;
}

#favorites li {
  background: #cce5ff;
  margin: 5px;
  list-style: none;
  display: block;
}

@media(min-width:375px;
) {
  #favorites li {
    display: inline;
  }
}

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Hanalei+Fill|Ruslan+Display" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="description" content="My First Site for Web Fundamentals">
  <title>My First Webpage</title>
</head>


<body>
  <p>This is my very first attempt at putting info up on a Webpage using a a media query for responsive design. <br></p>
  <p>Below is a list of my favorite people. It should change format based on whether or not you view it on an iPhone or a desktop.</p>
    <ul id="favorites">
      <li>My husband, Brian</li>
      <li>My kids, Louis and Brady</li>
      <li>My parents, Terry and Steve</li>
      <li>My brother, Steven</li>
      <li>My best friend, Missy</li>
    </ul>

</body>

Answer 1

从您的媒体查询参数中删除分号；这会使您的查询无效。

@media(min-width:375px;) 应该 @media(min-width:375px)

Answer 2

当我尝试将您的html放入代码段时，有以红色突出显示的html错误。您有带有正斜杠（<br>的break标记（</br>）被误认为是错误的（不必要使用正斜杠）。此外，结尾段落标记也未被识别为匹配项（可能是stacksnippets的缺点，但是仍然可以在一段文本后关闭段落，而不是使用多个br标签。）HTML错误可能比CSS造成的问题更多。 {3}}是检查HTML错误的非常有用的工具..只是一个提示！。

希望这会有所帮助

媒体查询无响应

2 个答案: