Question

我尝试更新某些CSS仅用于移动设备但仍然遇到以下语法错误：第17行第1行的预期LBRACE（指的是#logo行）

@media {max-width: 979px)
#logo { 
left: 50%;
position: relative;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

当我在开发人员工具中编辑CSS时，它工作正常，但只要我将它放在我的CSS子项中它就不起作用。

Answer 1

媒体查询的正确语法是：

@media (max-width: 979px) {
  #logo {
    left: 50%;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

供参考，请参阅Using Media Queries @ MDN。

@media CSS at-rule将由大括号分隔的CSS块中的一组嵌套语句与媒体查询定义的条件相关联。

Answer 2

您有语法错误

@media {max-width: 979px)

需要

@media (max-width: 979px)

具有ID选择器的媒体查询获得预期的LBRACE＆＃39;语法错误

2 个答案: