Question

我的代码中有视口行，顺便说一下。下面是我的CSS - 我怀疑我犯了一个明显的错误，但是我没有看到它！文本和图像确实流入预期的一列，但较窄的div仍然很窄，背景图像仍然显示，图像仍然是完整的大小。请指教。

.cont { width:100%; max-width:1000px; position:relative; margin:0 auto; font-family:Arial, Helvetica, san serif; font-size:1em; text-align:left; }
.hdr { width:100%; max-width:1000px; position:relative; margin:0 auto; }
.row1 { width:100%; position:relative; background:url(https://myimagefiles.com/dinnerman/tbg.png); float:left;  }
.row1l { width:26%; position:relative; margin-left:2em; float:left;  }
.row1r { width:64%; position:relative; margin-left:2em; margin-right:2em; float:left;  }
.row2 { width: 94%; position:relative; text-align:left; margin:0 auto; }
.row3l { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.row3r { float:left; width: 45%; position:relative; text-align:left; margin:0 0 0 2em; }
.grntxt { color:#207815; }
.bott { width:100%; height:19px; )

@media only screen and (max-width: 750px) {
.cont { width:100%;  } 
}
@media only screen and (max-width: 750px) {
.hdr { width:94%;  } 
}
@media only screen and (max-width: 750px) {
.mimg { width:94%;  } 
}
@media only screen and (max-width: 750px) {
.row1 { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row1l { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row1r { width:94%; margin-left:.2em; margin-right:.2em; background-image:none;} 
}
@media only screen and (max-width: 750px) {
.row2 { width:94%; margin-left:.2em; margin-right:.2em; } 
}
@media only screen and (max-width: 750px) {
.row3l { width:94%; margin:0 auto; } 
}
@media only screen and (max-width: 750px) {
.row3r { width:94%; margin:0 auto; } 
}
@media only screen and (max-width: 750px) {
.bott { display:none;} 
}

Answer 1

你有一个错字

.bott { width:100%; height:19px; )

应以}而不是)

终止

.bott { width:100%; height:19px; }

您应该使用CSS linter（例如CSSLint）来确保您没有输入任何拼写错误。它们可以作为单独的工具运行，作为构建链（Grunt，Gulp，Webpack等）的一部分，也可以直接在任何适当的IDE（Sublime，Atom等）中运行。还有像this one这样的在线版本，我用它来追踪代码中的错误。它们很适合像这样的快速检查，但不适合真正的开发工作流程。

此外，您应该真正对媒体查询进行分组

@media only screen and (max-width: 750px) {
  .cont { width:100%; } 
  .hdr { width:94%; } 
  .mimg { width:94%; } 
  ...
}

对于您正在应用的每组样式，不需要单独的样式。

媒体查询没有完成这项工作

1 个答案: