为什么我的媒体查询没有更改此元素的背景颜色？

Question

我创建了一个离子项目，在style.css文件中我想使用这种语法。即使我将宽度更改为1或0px，颜色也会保持浅灰色。

@media screen and (min-width 480px) {
    #color {
        background-color: red;
    }
}

#color {
    background-color: lightgray;
}

Answer 1

试试这个：

@media screen and (min-width 480px) {
    #color {
        background-color: red !important;
    }
}

#color {
    background-color: lightgray;
}

Answer 2

您有语法错误（即在min-width和480px之间缺少冒号）。请尝试使用此简化版本：

@media (min-width: 480px) {
  #color {
    background-color: red;
  }
}

Answer 3

我很抱歉我的语法错误。我打字速度太快，没有查看。你们的错误都是正确的，但我找到了解决问题的方法。而不是把'＆＃34; @ media＆＃34;在css文件中的语法，我简单地将它放在一个html文件中使用＆＃34; style＆＃34;元件。

View Image

Answer 4

好吧尝试使用..

“lightgrey”？你可以用两种方式写出“灰色”。你有没有试过写lightgrey而不是lightgray？

它对我有用。