Css 视网膜显示像素比率和媒体查询

如何让我的

max width

媒体查询在视网膜显示器上工作？我试过在macbook air上创建的网站，因为像素比是2，所以我的媒体查询在错误的屏幕宽度下处于活动状态

以下是我如何使用媒体查询的示例

@media only screen and (max-width: 1800px){ }

---

您需要使用

-webkit最小设备像素比：2

以达到视网膜2x的目标

大概是这样的：

@media（-webkit最小设备像素比：2）{
/*视网膜特异性物质*/
}

或者使用类似的方法：

@media（-webkit最小设备像素比：2）和（最大宽度：1800px）{
/*视网膜特异性物质*/
}

---

关于这方面的更多信息，您可以从问题描述中看到，您似乎没有使用viewport meta标记

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

以上内容应该可以解决您的问题

---

参见Mike King关于的文章（我建议阅读，因为它涉及到各种高清设备的CSS目标，而不仅仅是视网膜）：

如果您只希望目标视网膜显示，则设置 最小设备像素比：2和最小分辨率：192dpi应该可以

因此，您可以：

@media ((min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (max-width:1800px)) { 
    /* Your Retina-specific code goes here */
}

---

那么，我的最大宽度1800px媒体查询是否会在1800px时激活，而不是在900px时激活retina@Reece是的，如果你使用我给你的最后一行作为例子，但是如果你想在视网膜和非视网膜中使用target

1800px

，那么你需要其他东西。阅读我在答案中链接的文章，它对此进行了详细说明。这是错误的方法，请查看带有meta标记的答案。标记是必需的，这样在所有视网膜屏幕中，您的媒体查询将按照预期工作，具体地回答这个问题（这是我的答案），这不是问题，因为元标记已经就位。所以我给出了另一种解决方案。正如你所说，这可能不是一个错误的方法，但我不确定这是否是我网站上已经出现的问题。不确定这是否有什么不同，但它是一个wordpress网站。谢谢，不过您可能需要再次检查您的站点，因为此标签是您使用媒体查询所需的全部内容。如果它不起作用，那么可能有其他东西干扰它，但它应该起作用。你能详细说明一下吗？你是期望900像素还是3600像素？媒体查询，像所有CSS一样，使用CSS像素，而不是硬件像素。请尽量具体说明您的意思。您需要发布一个显示问题的标记的最小示例：@Rob抱歉，我现在正在做