CSS3视口解析错误

问题描述：

我试着将括号改为不同的位置。 W3C CSS Validator不接受来自CSS3的以下代码片段。有人请帮助我确定解析错误在下面的一段代码中的位置吗？CSS3视口解析错误

非常感谢！

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

答

不能嵌套一个@viewport at-rule内media query。媒体查询控制元素在页面上以特定宽度显示的方式，@viewport是<meta name="viewport">的后备。 @viewport应位于媒体查询之外，位于CSS的基本级别。

话虽如此，@viewport是只有相关处理时使用Internet Explorer的在Windows 8或Windows 10，“啪模式”考虑到这将如何差异小制作，你几乎可以忽略它完全除非你非常适合针对特定浏览器和操作系统的优化标签控制。

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

假设您只是简单地尝试调整页面上的元素，那么在处理各种浏览器时，您可以直接针对它来处理差异。然后，您可以简单地依靠常规媒体查询来设置不同宽度的页面风格：

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

希望这有助于您！ :)

我做一个nanodegree的全栈Web开发和转让需要所有的浏览器和一些倒退的版本中，所有屏幕（RWD）。这段代码将是我CSS3中的第一行代码，它不会放置在我的HTML5页面中。我确实已经在我的HTML5源代码中提供了您建议的元标记。 –

那你应该没问题;老实说，我根本不用担心使用'@ viewport'。尽管你很明显想使用'@ media'查询。我建议先用标准媒体查询（以及HTML''标签）首先构建网站，然后看看它在Windows上的IE上如何显示。如果网站显示正常（99％的几率），则不需要做任何其他事情:) –

答

在你的html头部添加元。

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

而且你的CSS应该是这样的

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