媒体查询似乎不起作用

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;}}

这是代码笔：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

}

媒体查询似乎不起作用

Media queries do not seem to be working

html

css

media

grid