媒体查询似乎无效

Question

我正在尝试向页面中添加媒体查询，但是它似乎不起作用

我还很陌生，还不完全了解媒体查询的工作原理

以下是媒体查询的代码：

@media screen (max-width:320px){h1{font-size:0.75em;}h1{font- 
size:0.8em;}p{font-size:0.8em;}figcaption{font-size:0.8em;}.img-style{max- 
width:45px;max-height:45px;}#profile-link{max-width:55px;max- 
height:55px;}#navbar{text-align:center;}}

这是codepen：https://codepen.io/don0ts/pen/JByjqO

Answer 1

尝试这样写：“ @ media only screen and”，而不是“ @media screen”

Answer 2

您可以使用此代码，只需从“ @media screen”中删除“ screen”。

    @media (max-width:320px){
      h1{
        font-size:0.75em;
      }
      h1{
        font-size:0.8em;
      }
      p{
        font-size:0.8em;
      }
      figcaption{
        font-size:0.8em;
      }
      .img-style{
        max-width:45px;max-height:45px;
      }
      #profile-link{
        max-width:55px;max-height:55px;
      }
      #navbar{
        text-align:center;
      }
  }

或者您也可以更改为“ @media only screen and（max-width：320px）”。

Answer 3

您错过了and一词。

@media screen 
and (max-width: 320px) {

  //styles go here

}