Question

我使用了不同宽度的媒体查询。我使用了3张样式表用于移动，标签和桌面视图，如下所示： - 对于移动视图： -

@media only screen and (min-width : 120px) and (max-width : 640px) { }

对于标签视图： -

 @media only screen and (min-width : 640px)and (max-width : 980px){  }

对于桌面视图： -

@media only screen and (min-width : 980px) { }

当我调整浏览器的大小时，它会显示自适应视图，但在检查移动设备时，网页仍显示浏览器视图。

在检查Google Chrome浏览器的设备模拟器功能时，响应式视图也不具有自适应性。

然而，移动视图中使用的侧边菜单栏仍然可以在预期的移动视图中看到，但其余网站没有相应地调整宽度和高度。

任何人都可以解释背后的问题和原因。

P.S。：我受限于媒体查询无法使用Bootstrap或任何其他框架来使我的网站响应。

Answer 1

我们走了。根据您的媒体查询，浏览器不确定应该调整哪个布局，因为您已经定义了与断点相同的宽度。您需要做的是定义这样的媒体查询。

对于移动视图： -

@media only screen and (min-width : 120px) and (max-width : 639px) { }

对于标签视图： -

@media only screen and (min-width : 640px)and (max-width : 979px){  }

对于桌面视图： -

@media only screen and (min-width : 980px) { }

希望这对你有所帮助。如果还有问题，请回来。！

Answer 2

关键字“only”也可用于隐藏旧版的样式表用户代理。用户代理必须处理以...开头的媒体查询 “仅”，好像“唯一”关键字不存在一样。

如果@media部分中至少有一些内容适用于您的移动设备，请确保将所有@media部分放在CSS文件的底部，并确保此文件链接到您的所有其他CSS文件中的最新内容。如果它仍然无法按预期工作，请检查您的实际CSS代码或为我们制作演示。如何制作Minimal, Complete, and Verifiable example

PS。：您不必为min-width

@media