Question

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

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

但是当我从开发人员工具调整项目大小时，它可以工作......我只为媒体查询应用了<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可以做得非常好。