CSS3 视口解析错误答案

【问题标题】：CSS3 Viewport parse errorCSS3 视口解析错误
【发布时间】：2018-03-28 14:32:29
【问题描述】：

我尝试将支架更改为不同的位置。 W3C CSS Validator 不接受我的 CSS3 中的以下代码。有人可以帮我确定以下代码中的解析错误在哪里吗？

非常感谢！

@media (min-width: 300px) {
     @viewport {
         width: 300px;
     }
}

【问题讨论】：

标签： css viewport w3c-validation parse-error

【解决方案1】：

您不能将 @viewport at-rule 嵌套在 media query 中。媒体查询控制元素在特定宽度下在页面上的外观，@viewport 是<meta name="viewport"> 的后备。 @viewport 应该在媒体查询之外，在 CSS 的基础级别。

话虽如此，@viewport仅在处理 Windows 8 或 Windows 10 上的 Internet Explorer 的“快照模式”时才相关。考虑到它的影响很小，您几乎可以放心地忽略除非您为特定的浏览器和操作系统进行非常优化的标签控件，否则它完全没有。

将 META 视口设置为 <meta name="viewport" content="width=device-width, initial-scale=1"> 足以处理移动设备上的各种不同浏览器。

假设您只是尝试调整页面上的一个元素，您可以在处理各种浏览器时直接将其定位为差异。然后，您可以简单地依靠常规媒体查询来设置不同宽度的页面样式：

@media screen and (min-width: 300px) {
  #id {
    width: 300px;
  }
}

希望这会有所帮助！ :)

【讨论】：

我正在为全栈 Web 开发人员进行纳米学位，并且该作业需要所有浏览器和几个向后版本，所有屏幕 (RWD)。这段代码将是我的 CSS3 中的第一行代码，它不会放在我的 HTML5 页面中。我的 HTML5 源代码中确实有您建议的元标记。
那你应该没问题；老实说，我根本不会担心使用@viewport。不过，您显然希望使用@media 查询。我建议首先使用标准媒体查询（以及 HTML <meta> 标记）构建站点，然后查看它在 Windows 上的 IE 上的显示方式。如果网站显示正常（99% 的机会），您无需执行任何其他操作 :)

【解决方案2】：

在 html 的 head 部分添加元数据。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

你的 CSS 应该是这样的

@media only screen and (max-width : 500px) {
  div {
    width: 300px;
  }
}

【讨论】：