解析错误 CSS 有效

Question

@media only screen (min-width: 1021px) and (max-width: 1180px) {
 
 .twee img {
  margin-top: 3em;
 }
 
 .drie {
  margin-top: 3em;
 }
 
 .audiovisual iframe {
  width: 90%;
 }
 
 .cp img {
  width: 75%;
  height: 75%;
  display: inline;
  padding: 0;
 }
}

@media only screen (min-width: 791px) and (max-width: 1020px) {
 body {
  background-image: url(IMG/Sam-open-copy-1020.jpg);
 }
 
 .twee img {
  margin-top: 7em;
 }
 
 .drie {
  margin-top: 7em;
 }
 
 .zes {
  margin-top: 2em; 
 }
  
 .audiovisual iframe {
  width: 90%;
 }
 
 .kaart iframe {
  width: 75%;
  height: 75%;
  padding: 0;
  margin: 0;
  padding-bottom: 2em;
 }
 
 .cp img {
  width: 75%;
  height: 75%;
  display: inline;
  padding: 0;
 }
 
 #totop {
  right: 0;
 }
}

所以这是我的代码，我的媒体查询不适用于我的 HTML。

当我验证时，我遇到了这些错误。（参见图像错误）但我无法找出它有什么问题？我检查了所有内容，但可能我找不到它，因为我查看了它或其他原因....

Answer 1

在您的@media 查询中添加一个额外的 'and'：

@media only screen and (min-width: 1021px) and (max-width: 1180px) { ...

解析错误 CSS 有效

Parse error CSS valid

css

media-queries