我相信很多人以前都面对过这个问题。我完成了我的网站的开发。在开发过程中，我使用媒体查询并使用Firefox响应式设计视图。我做了一项研究，看看最常见的屏幕分辨率是什么，并添加了这些分辨率。 Chrome和Opera调整浏览器也进行了测试。
今天，当我在手机（Moto G）上测试时，我的网站似乎没有反应。他们的布局没有改变。我做的另一件事是使用Chrome开发者工具启用设备工具栏。令我惊讶的是，任何选定的设备都改变了我的布局。
在媒体查询中，我使用width min-width和max-width进行调整。 阅读SO我发现最明显的是使用设备宽度而不是宽度。
那么，我是否需要更改所有媒体查询才能在移动设备上查看结果？我在计算机上丢失了屏幕分辨率吗？
答案 0 :(得分：0)
也许您没有将文件上传到您的网络服务器？或者如果您正在使用预处理器和应用程序，它可能没有转换您的代码？那些只是我的想法，没什么大不了的。
我将此媒体查询用于中画面：
@media screen and (max-width: 1199px) and (min-width: 992px)
它对我来说非常合适，对于手机屏幕，我甚至没有指定最小宽度。
无论如何，我需要粘贴到jsFiddle的代码来帮助你，谢谢。
答案 1 :(得分：0)
经过另一项研究后，我发现我忘记了元标记视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
添加它可以解决问题。