我读到大多数媒体查询使用视口宽度来确定您是在手机，平板电脑还是PC上。我正在用无尽的网格构建一个带有1000个小拇指的图像网格。每个拇指都是125px，在我的笔记本电脑上（MacBook 13“），我可以轻松地将9-10个拇指放在一排 - 这提供了良好的用户体验。如果我将相同的代码用于连接到1080px的nexus 5，我得到6 -7拇指，这是一个糟糕的用户体验。这个连接是6-7厘米，而MacBook是25英寸 - 很大的区别。
我的方法是检测设备是移动设备还是个人电脑和拇指尺寸 - 大尺寸用于移动设备（比如说250px）和小尺寸电脑（125px）。 但是我如何检测设备。如果我使用宽度我基本上必须使用最小宽度1100px来捕捉大多数新手机。我也可以选择分辨率，手机的DPI通常高于PC /笔记本电脑。
或者我完全错了吗？
我正在React中编写应用程序。
答案 0 :(得分：3)
并非您的Nexus 5以1080px宽度呈现网页，而是您的网站无法响应您的手机屏幕，因此它会呈现为缩小的桌面网站。
您需要将此视口元标记添加到您网站的<head>：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
一旦进入，您的Nexus 5应该以接近400px宽的内容呈现网页，并且您可以围绕它进行媒体查询。
以下是如何在宽度为480px的屏幕上将缩略图宽度调整为125px：
@media (max-width: 480px) {
img {
width: 125px;
}
}