Question

我正在尝试创建一个医师网站，一切正常，但是媒体查询不起作用，我尝试了几次，但不知道为什么它不起作用。这是codepen链接： https://codepen.io/Razu381/pen/XQJVzg

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

body{
    font-size: 15px;
}

.slide-text h4{
    font-size: 25px;
}

.slide-text p{
    font-size: 16px;
}

Answer 1

在这里，这应该可以正常工作。

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

    body{
        font-size: 15px;
        }

        .slide-text h4{
            font-size: 25px;
         }

        .slide-text p{
                font-size: 16px;
        }
}

Answer 2

其语法错误，您缺少}。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

  body{
      font-size: 15px;
  }

  .slide-text h4{
      font-size: 25px;
  }

  .slide-text p{
      font-size: 16px;
  }
}

Answer 3

您提供的代码存在的问题是，您需要另一组右括号。

and (min-device-width : 320px)
and (max-device-width : 480px) { <- start of the media query

body{
    font-size: 15px;
}

.slide-text h4{
    font-size: 25px;
}

.slide-text p{
    font-size: 16px;
}<- end of slide text p

<- no end of the media query```

Answer 4

您最后缺少}（右括号）。添加右括号后，代码便可以使用。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

     body{
        font-size: 15px;
     }

     .slide-text h4{
        font-size: 25px;
     }

     .slide-text p{
        font-size: 16px;
     }
}

CSS媒体查询无法正常运行

4 个答案: