【发布时间】：2015-01-22 20:54:43
【问题描述】：
其他人有这个问题吗？我在我的 Mac 上设计了一个响应式网站布局，它使用视网膜显示，它看起来很棒。我承认我的显示设置使用了更小尺寸的视网膜选项之一。当我去向客户展示设计时，他们可能有一台 PC 笔记本电脑或一台较旧的非视网膜 macbook，一切对他们来说都是巨大的。
有没有什么技巧可以让我所缺少的体验更加一致？
谢谢！
【问题讨论】：
标签： responsive-design retina-display
【发布时间】：2015-01-22 20:54:43
【问题描述】：
有几个想法可以帮助您入门。
如果您遇到的问题是内嵌图像，那么retina.js 是一个简单的解决方案。您将图像的常规和高分辨率版本保存到您的站点，此 JS 将向具有视网膜显示器的访问者提供高分辨率版本。
如果您想通过 CSS（如背景）管理图像，则此媒体查询可以解决问题：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* CSS for retina displays here */
}
祝你好运！
【讨论】：
-
感谢大卫，您的解决方案很棒，但我也在尝试处理这样一个事实，即布局中 div 的高度存在一些感知大小差异。意思是，我可以有一个 500 像素高的英雄形象，在我的屏幕上看起来很棒。当我坐在一个没有视网膜的客户旁边时，一切看起来都很大。该英雄形象可能会隐藏所有内容。我想知道我是否需要更改我的屏幕分辨率以模仿他们所看到的，所以我不只是为我的屏幕设计？也许我想错了？
-
主图是你的 CSS 定义的背景吗？