为什么媒体查询不能在我的博客上运行？

Question

这是我的博客：Blog 我在CSS中编写了以下代码：

@media screen and (max-width: 600px){
.title a{
color: red !important;
}
}
@media screen and (max-width: 500px){
header{
display: none !important;
}
}

但是当我在任何手机中打开这个博客时，它什么也没做。无论您是在手机还是桌面浏览器中打开，网站都会打开。为什么会这样？

Answer 1

你的标题中有这个， <meta content="width=1100" name="viewport">

请改为： <meta name="viewport" content="width=device-width, initial-scale=1">

要了解元视口的工作原理，请参阅：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

您的代码中发生的事情是您已设置＆＃34;至少1100px＆＃34;网页的宽度。

通过将其更改为设备宽度，您的网页将与设备一样宽。