如何创建面向智能手机的css

个人电脑和智能手机屏幕分辨率的差别已经很近了。所以我认为区分两个

@media max width

不精确

是我错了，还是有其他更好的方法

编辑： 在我问了这个问题之后，我有了一个想法，我想用

厘米（cm）

单位而不是

像素

是区分小屏幕和大屏幕的最简单方法。但不幸的是，米制并没有得到很好的支持。看起来，它与我的电脑配合得很好，但我的手机认为他的宽度超过10厘米甚至20厘米长

---

我目前正在使用

@media-orientation

来区分PC和平板电脑及移动设备。我主要关心的是手机，因为它的宽度在纵向上太小，浪费了页面边距上的空间，所以现在这对我来说已经足够了

目前似乎没有最佳实践，建议使用多种技巧来检测用户是否正在使用移动浏览器

这里有一个类似的问题和推荐的技巧

---

请记住，您可以在一个查询中使用多个测试，也可以在媒体查询中使用和/或功能

@仅媒体屏幕和（-webkit最小设备像素比：2）和（最大设备宽度：480px）{}

---

我发现测试

像素比率>1

和/或

分辨率（dpi）

与设备宽度相结合在捕获大量移动设备时非常有用

不要。你应该根据屏幕大小构建CSS；如果智能手机的屏幕足够大，看起来像电脑，那没关系。@SLaks，这不完全正确。即使是大屏幕（如iPad Pro）也无法比最小屏幕手机更好地与

：hover

之类的东西交互。但即使手机的宽度分辨率很高，你也不想留页边距，因为最终屏幕还是很小。巫婆让我记住我可以用cm，谢谢。