当我在macbook视网膜上使用“更多空间”显示设置开发我的网站时，如何修复尺寸

Question

我在带有视网膜的macbook pro上开发了一个网站，我的显示设置被缩放到“更多空间”。 webapp看起来很棒。

但是当我将显示器设置回“默认”缩放时，它看起来非常糟糕，所有组件都太大了。

显示缩放如何工作？我最好的猜测是，它是设备像素和CSS像素之间的不同映射，但其他网站似乎更优雅地处理这个问题。对于具有不同分辨率和显示设置的人，我希望我的webapp看起来大致相同。 CSS有什么优雅的处理方式吗？还是Stylus？ （我正在使用的CSS预处理器）

我目前的计划是手工完成CSS并将所有尺寸切成两半。但如果有更好的方法，我宁愿不必去那里。

Answer 1

你有什么特别的问题吗？

字体不应该是一个问题，你应该使用SVG作为你的图标。

唯一真正的灰色区域是图像，但如果你使用像picturefill这样的东西，那么它应该足够好了。

此外，我认为您应该阅读this。

Answer 2

您可以尝试@media。

您可以检查设备像素比率并设置不同的图像或样式 例如，如果要检查此设备是否具有x3比率，则应执行以下操作：

@media only screen and (-webkit-min-device-pixel-ratio : 3) {
    .style-of-element {
        background: url();
        font-size 24px;
    }
}

如果我们只谈论图片，您可以看到HTML5标记<picture>。 Link
您也可以检查像素比率，并根据它放置不同的图像。就像这样：

   <picture> 
        <source srcset="http://big.jpg" media="(min-width: 617px)">
        <source srcset="http://medium.jpg 1.25x, http://big.jpg 1.5x" media="(min-width: 419px)">
        <source srcset="http://medium.jpg 1.5x, http://big.jpg 2x" media="(min-width: 321px)">
        <source srcset="http://medium.jpg 2x, http://big.jpg 3x" media="(min-width: 222px)">
        <img alt="Alt" src="http://default.jpg">
   </picture>

我也知道关于Retina是什么的一个很好的介绍，但它是俄语。可能你会从图片中得到一些理解吗？ Link