媒体查询浏览器调整大小问题

Question

我正在我的项目上应用媒体查询，但是当我调整浏览器大小时，它不会 work.But 当我从开发者工具（检查元素）调整它时它工作...听起来很荒谬，但我会用图片告诉你。

如下图。我已经为我的菜单栏应用了媒体查询。如您所见，当我调整浏览器大小时，它不起作用。

但是当我从开发人员工具调整项目大小时，它起作用了...我只 <meta name="viewport" content="width=device-width, initial-scale=1"> 应用了媒体查询。

第二期如下。平板电脑视口是否有 <meta> 标签？ 现在我的媒体查询适用于所有手机，但在平板电脑上不行。我试图为 mu 问题找到一些答案，但我没有找到任何东西...

Answer 1

我的想法是，这是因为您的查询仅适用于该设备。如果您要尝试类似的操作：

 @media screen and (min-width: 480px) {
    background-color:red;
 }

尝试一下，但老实说，我会考虑引入像 Bootstrap 这样的样式框架。 它消除了查询的大部分麻烦。此外，这也很棒，因为您通常希望首先满足移动屏幕的需求，而 Bootstrap 默认情况下可以很好地做到这一点。