Html 捕捉移动css媒体查询的最佳方法

我对响应式css是新手。我已经了解了很多关于媒体查询的知识，但我仍然没有弄清楚哪种方法是捕捉用户是否使用手机的最佳方法。 识别移动用户的媒体查询使用设备宽度，但设置断点的最佳值是什么？ 当我的android智能手机与Google chrome配合使用时，页面的宽度约为400px，即使真正的分辨率是全高清，1080px宽度。这取决于浏览器，还是什么？我看到有人用em方法设置断点，这更准确吗？我也想了解更多关于掌上电脑的情况。 最后，在阅读了大量不同的信息后，你能告诉我哪一种是最有效的方法，哪一种是捕捉客户是否移动的最佳媒体查询？多谢各位

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

关于如何处理这个问题，有一些理论。有些人去寻找最流行的设备宽度，并在这些地方设置断点。如果您确实知道站点上的大多数用户使用的是什么，这将是非常好的。然而，缺点是您必须按照这些宽度来塑造您的设计，并且随着新设备的出现，您必须不断更新您的代码

因此，您的断点将类似于：

// 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处的断点开始，到11001000处。如果我先用手机，我会从320350400500开始，等等

当我的android智能手机与Google chrome配合使用时，屏幕的宽度 page的分辨率约为400px，即使真正的分辨率是全高清， 1080px宽。这取决于浏览器，还是什么

设备宽度有很多因素影响。但设备宽度基本上是浏览器显示的像素数。还有一点比这更重要，但你最好的选择是谷歌设备宽度

我看到有人用em方法设置断点，是这样吗 更准确

没有。这只是从父元素细分的一种方式。在你有更多的时间来研究之前，请坚持使用像素

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

---

最好的方法是确定你的断点。您不能专门针对使用CSS的移动浏览器。您只能针对这些浏览器的属性（宽度、高度、方向），这样您就可以知道iPhone6的纵向分辨率为375像素。所以你可以用这个宽度来瞄准他们。正如Allan所说，您可以使用Javascript或服务器端库瞄准设备，并以这种方式添加类。但在我看来，最好坚持使用设备宽度，并将其保存在绝对卡住的情况下。

使用jquery或javscript来检测用户是否使用移动设备，该方法通过检测设备浏览器用户代理来完成。媒体查询只获取基于设备宽度的设计，设备宽度会有所不同。@Allan我想设计一个响应性强的网站，所以css是将桌面链接到手机的主要内容。Css可以通过JavaScript进行更改，但我认为这不是使设计具有响应性的正确方法…非常感谢您的回答，这可能是重复的。最后一个问题，您建议移动/非移动css的断点宽度是多少？你认为480px好吗？你需要很多断点。小型电脑起价为1轮1100，平板电脑起价约为800，手机起价约为500。我知道在Stack上共享链接是一种不好的做法，但从这里开始：然后在谷歌上多看看。如果你在你的网站或演示上有任何分析，看看他们最常用的设备。或者使用上面的选项2，使整个设计具有响应性。