@media规则不起作用

Question

我正在尝试将一些CSS应用于移动设备上，以下是我的代码：

@media all and (max-width: 1081px;) {
 #messageText
  {
   font-size:6px !important;
  }
}

这里有一些文字

但是，当我在Chrome开发工具中选择messageText div元素时，它似乎无法正常工作，font-size没有出现在任何地方，甚至没有划掉。这让我觉得元素由于某种原因没有被应用，而是被覆盖。有谁能说出原因？我尝试在Safari中查看我的iPhone 6并在Chrome中模拟iPhone 4。

Answer 1

正确的语法是：

@media all and (max-width: 1081px) {
  #messageText {
   font-size: 6px !important;
  }
}

您不需要;区块内的额外max-width: 1081px。

Answer 2

Hello使用如下： -

  @media only screen and (max-width: 1081px) {
   #messageText
    {
    font-size:6px !important;
     }
   }

这样可行。