在手机浏览器中打开应用程序时媒体查询不起作用

Question

当我在浏览器中使用响应式设计模式时，我的媒体查询适用于我指定的所有大小。当我在不同的设备上打开我的web应用程序时，这些相同的媒体查询将不起作用。例如，我为我的一个div设置的高度是:197px用于屏幕max-height: 700px,290px用于屏幕max-width: 1382px。当我使用响应式网页设计时，两种尺寸的媒体查询都工作得很好。当我调整浏览器大小或在手机上打开相同的web应用程序(max-height低于700px)时，媒体查询仍然在渲染屏幕宽度为1382px的内容。

同样，当我调整浏览器大小(在我的笔记本电脑上)而不是使用响应式设计模式时，媒体查询也不起作用。

我所理解的是，媒体查询工作在浏览器窗口大小，而不是设备的视口大小。我试过使用media all和' ' '媒体屏幕````，都没有帮助解决这个问题。那么，如何编写媒体查询来支持浏览器窗口大小呢?

帮忙吗?

Thanks in advance

Answer 1

有两种解决方法:

1. 添加大量断点的不太实用的方法(对于最大/最小高度和宽度)。可能出现的问题是媒体查询的顺序将被打乱，破坏布局。

2. 在代码的每个级别使用flexbox/grid。即使是浮动菜单或任何其他浮动组件也应该放在flexx结构下。在这种情况下，你只需要编写最少数量的媒体查询，flexbox属性将负责保持你的布局整洁。