Question

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

非常感谢！

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

Answer 1

您无法在 @viewport at-rule 中嵌套 media query 。媒体查询控制元素在特定宽度上在页面上的显示方式，@viewport是<meta name="viewport">的后备广告。 @viewport应该位于媒体查询之外，位于CSS的基础级别。

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

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

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

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

希望这有帮助！：）

Answer 2

在你的html的head部分添加meta。

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

你的CSS应该是这样的

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

CSS3视口解析错误

2 个答案: