捕获移动 CSS 媒体查询的最佳方法

Question

我是响应式 CSS 的新手。我学到了很多关于媒体查询的知识，但我仍然没有弄清楚如果用户是否使用移动设备，哪种方法是最好的方法。 识别移动用户的媒体查询使用设备宽度，但设置断点的最佳值是哪个？ 当使用我的安卓智能手机和谷歌浏览器时，页面的宽度大约是 400px，即使真正的分辨率是全高清，1080px 宽度。这取决于浏览器，还是什么？我看到有人用em mesure设置断点，这样更准确吗？我也想了解更多关于手持设备的信息。 最后，在阅读了很多不同的信息之后，你能告诉我，如果客户端是移动的，哪种方法最有效，最好的媒体查询？谢谢。

Answer 1

识别移动用户的媒体查询使用设备宽度，但设置断点的最佳值是什么？

关于如何处理这个问题有一些理论。有些人去寻找最流行的设备宽度并在这些地方设置断点。如果您确定您网站上的大多数用户使用的是什么，那就太好了。然而，缺点是您必须将您的设计塑造成这些宽度，并且您必须在新设备问世时不断更新您的代码。

所以你的断点应该是这样的：

// iPhone 6
@media only screen and (min-device-width : 375px) {
    // styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
    // styles go here
}

另一个理论是让它在任何大小上都可以完全扩展，而不管设备是什么。这样做的好处是您可以确保您的设计在所有设备上看起来都很棒。缺点是它使您的代码更加臃肿。这里的断点将在您需要它们的任何地方。我个人使用这种方法，但是从 1200 的断点开始，然后根据需要转到 1100、1000。如果我先使用移动设备，我将从 320、350、400、500 等开始...

当使用我的安卓智能手机和谷歌浏览器时，宽度 页面大约400px，甚至认为真正的分辨率是全高清， 1080 像素宽度。这取决于浏览器还是什么？

设备宽度有很多因素。但设备宽度基本上是浏览器显示的像素数。还有比这更多的东西，但最好的选择是 Google 设备宽度。

我看到有人用em mesure设置断点，是这个吗 更准确？

不。这只是从父元素细分的一种方式。在您有更多时间对此进行研究之前，请坚持使用像素。

最后，在阅读了很多不同的信息之后，你能不能 请告诉我哪种方式最有效，最好的媒体查询 捕捉客户端是否移动？谢谢。

最好的方法是确定你的断点。您不能专门使用 CSS 定位移动浏览器。您只能定位这些浏览器的属性（宽度、高度、方向），因此您可以知道 iPhone6 的纵向宽度为 375 像素。因此，您可以使用该宽度定位它们。正如 Allan 所说，您可以使用 Javascript 或服务器端库来定位设备并以这种方式添加类。但是 IMO 最好坚持使用设备宽度，并将其保存到您绝对卡住的情况。