Question

我无法让我的媒体查询处理家庭作业。我认为我做的一切都是正确的，我花了2个多小时试图理解为什么从移动设备上查看时似乎没有任何变化。如果任何人有任何想法，它将有助于吨。附件是html和我的css代码的主要部分，它遵循我的标准css。

<head>
<title>Pacific Trails Resort</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
<link href="pacificprint.css" rel="stylesheet" media="print">
</head>

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

Answer 1

问题是你的一半CSS规则不以分号结尾。

虽然在语句中确实可以省略最终的CSS分号，但 at-rules （如媒体查询）构成一个声明自己：

语句是一个构造块，以任何非空格字符开头，以第一个右括号或分号结尾（在字符串外，未转义且未包含在另一个{}中，{{1} }或()对）。

因此，只有最后规则才能省略分号（[]）。

话虽如此，在每一行添加分号是很好的做法，不会造成任何问题，所以这是你应该始终瞄准的事情。

我已经格式化了代码，并在以下（现在正在工作）的示例中为每一行添加了分号：

footer

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

@media不起作用

1 个答案: