视网膜显示如何与我的 css 和 psd 相关

Question

我问这个问题有点困惑，因为我已经阅读了所有可用的文章，但仍然找不到有用的东西。问题是我在 2880 px width 中有一个 psd 设计。现在将其转换为 html 和 css。我设计的页面宽度为 2880px。最后我发现这不是我应该使用的东西。因为在小屏幕上一切都太大了。在 psds 的设计指南中写道：

This PSD is designed for retina display

我如何使用最佳实践来实现这一目标。我必须将它设计到 2880 或 1440。

P.S ：我对 css 很陌生，挑战是我不必使用 bootstrap 这是 magento 主题中的简单自定义。

Answer 1

你必须考虑移动端屏幕的像素比例。请记住，并非所有人都具有相同的像素比。这将是一本好书。

what exactly is device pixel ratio?

大多数小型移动设备的 1.X 比例会根据该比例削减图像的原始清晰度。就像如果你的图像有 2880px 宽度它会变成 1440px 左右取决于像素比率。您可以在此处查看设备的像素比：https://mydevice.io/devices/

一旦您知道了屏幕的像素比例，您就可以使用此 CSS 来控制需要加载的图像。

@media only screen and (min-device-pixel-ratio: 2) {
    .yourClass{ background-image: url('low-resolution.jpeg'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    .yourClass{ background-image: url('high-resolution.jpeg'); }

}

Answer 2

对于像视网膜这样的高分辨率屏幕，您可以使用媒体查询来提供替代精灵和图像以获得更好的结果，或者只是让它按像素比例放大。有用的东西阅读 https://www.leemunroe.com/designing-for-high-resolution-retina-displays/

视网膜显示如何与我的 css 和 psd 相关

how retina display is concerned with my css and psd's

html

css

magento

retina-display