仅当浏览器屏幕缩小时，如何才能显示消息？

Question

我试图让消息仅在屏幕缩小时才显示。我不明白为什么我在做什么不起作用。发生的事情是消息始终在应用，而不是仅在屏幕缩小时才应用。我可以看到css显示在我的源文件中，但是我没有看到css规则被应用。

css

@media only screen and (max-width: 600px) {
    .invisibleMessage: {
      display: none;
    }
  }

html

<p class='invisibleMessage'>Only visible on mobile</p>

Answer 1

发布此消息后，我立即意识到我只是在添加一个冒号，即在'.invisibleMessage'之后不应该出现的冒号 也应该是最小宽度

Answer 2

CSS应该是这样的：

 .invisibleMessage {
    display: none;
 } 

 @media only screen and (max-width: 600px) {
    .invisibleMessage {
      display: block;
    }
  }