媒体查询不适用于手机

Question

我对媒体查询有疑问（第一次使用）。 http://swiatek.org.pl/-2/ 当我更改浏览器 window 时，它们可以正常工作，但是当我查看 chrome 上的检查切换设备工具栏时，媒体查询不起作用:(。 CSS: http://swiatek.org.pl/-2/main.css

Answer 1

在声明媒体屏幕时添加单词 "only"。

@media only screen and (max-width: 880px) {
    #first header{
        font-size: 55px;
    }
}

您可以在这里了解更多信息：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您缺少元标记，请将其添加到您的 header。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 3

替换

@media screen and (max-width: 1000px)

和

@media only screen and (max-width: 1000px) 

并替换

@media screen and (max-width: 880px) 

和

@media only screen and (max-width: 880px)