媒体查询是不适应

Question

我已经使用了不同的width.I媒体查询已用于移动，标签和桌面视图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) { } 

当我重新SIZ我的浏览器然后显示自适应视图，但在移动设备登录时，网页仍显示浏览器视图。

在检查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

1. 尝试删除only screen and，让它像@media (min-width : ... 这些属性。
2. 如果它有效，但您真的想要使用screen and只需删除only关键字。从specs：

“只有”关键字，也可以用来隐藏从旧 用户代理样式表。用户代理必须处理仅以 “仅”开始的媒体查询，就好像“唯一”关键字不存在一样。

如果至少从@media部分东西正在为您的移动设备请确保您所有的@media部分放置在你的CSS文件的底部，该文件是链接到你的HTML最新的所有其他CSS文件。如果它仍然不能如预期般检查您的实际CSS代码或为我们做演示。如何使Minimal, Complete, and Verifiable example

PS：你不必指定min-width的最小屏幕的@media