4

デスクトップ用、タブレット用、スマートフォン用の 3 つの psd に分割された Web サイトのデザインを受け取りました。私はすべてをメディアクエリでレスポンシブにし、すべてを網膜にもしています。しかし、私を悩ませていることの1つは、次のことです。

たとえば、Facebook リンク (アイコン) の背景画像があるとします。このアイコンは、デスクトップ psd で 48x48px です。次の css を使用すると、網膜のサイズが自動的に 96x96px になります。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
   #fb {
       background: url("../images/fb_2x.png") no-repeat;
       background-size: 48px 48px;
       width: 48px;
       height: 48px;
   }
}

しかし、タブレットやスマートフォンの psd を見ると、デザインの残りの部分に合わせてアイコンのサイズが変更されていることに気付きました。アイコンは 28x28px になりました。このアイコンの網膜バージョンと解像度ごとのサイズの違いの両方をターゲットにするにはどうすればよいですか。Retina メディア クエリの CSS を次のように変更することを考えていました。

#fb {
    background: url("../images/fb_2x.png") no-repeat;
    background-size: 28px 28px;
    width: 28px;
    height: 28px;
}

..しかし、それはすべてのRetina対応画面（iPad RetinaとMacbook Pro Retinaも）が28pxの小さなアイコンサイズを持つことを意味します（Retinaですが）。しかし、これは元のサイズではありません。48x48px です。

読んでアドバイスをありがとう！

4

1 に答える 1

8

この進歩的なアプローチはどうですか：

    #fb {
      background: url("../images/fb_28.png") no-repeat;
      background-size: 100% auto;
      width: 28px;
      height: 28px;
    }

    /* bigger image for desktop OR high resolution */
    @media (min-width: $desktop-size), -webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { 
      #fb {
        background-image: url("../images/fb_48.png");
      }
    }

    /* bigger size for desktop */
    @media (min-width: $desktop-size) {
      #fb {
        width: 48px;
        height: 48px;
      }
    }

    /* bigger image for high resolution desktop */
   @media (min-width: $desktop-size) and (-webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)) {
      #fb {
        background-image: url("../images/fb_96.png");
      }
    }
于 2012-11-30T18:36:59.927 に答える