css - 如何在 Retina 屏幕上使用 CSS 媒体查询

Question

我编写了以下未按预期运行的媒体查询。更改发生在 1537px 而不是 1024px。我使用的是 Retina 屏幕，此代码包含在使用 create-react-app 3 引导的元素中的 SCSS 文件中。

我做了一些研究，发现我的设备像素比是 3。这会影响我编写媒体查询的方式吗？

我的 CSS:

&--info-container {

  border: 5px solid red;

  @media (max-width: 1024px) {
    border: 5px solid green; 
  }

}

在我的 index.html 中:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

非常感谢!!

Answer 1

您是否尝试定位 iPad？设备像素和 CSS 像素不同。

这里有两篇文章对此进行了更详细的解释: https://medium.com/@flik185/understanding-device-resolution-for-web-design-and-development-3bb4a5183478 https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

以下是您可能会觉得有用的快速引用:http://iosres.com/