1

我有一个图案作为背景 - 用于常规分辨率和视网膜。如果我这样处理

body {
    background: image-url('ttg.png') repeat top left;
    @media  (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        background: image-url('ttg@2X.png') repeat top left;
        background-size: 476px 476px;
    }
}

或者那样

body {
    background: image-url('ttg.png') repeat top left;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
        background: image-url('ttg@2X.png') repeat top left;
        background-size: 476px 476px;
    }
}

每次 Chrome 向我提出以下建议时：

考虑使用“dppx”单位而不是“dpi”，因为在 CSS 中“dpi”表示每 CSS 英寸的点数，而不是每物理英寸的点数，因此与屏幕的实际“dpi”不对应。在媒体查询表达式中：(-webkit-min-device-pixel-ratio: 1.5)，不是全部，(min-resolution: 144dpi)

那么调用这两个背景的正确方法是什么？最好的问候拉尔夫

4

0 回答 0