レティナディスプレイ対応のcssの書き方

最近Retina(レティナ)対応が増えてきましたので、書き方をまとめておきます。

cssでの分岐方法

@mediaを利用して、Retinaの時だけ読み込まれるcssで、styleを上書きする方法で対応します。

実際書いてみるサンプル

2倍のサイズの画像のファイル名ですが、いわゆる慣例にしたがって、@2x.pngのようなファイル名にしています。
background-sizeを利用して、サイズを半分(表示されるサイズ)にしています。

:before,:afterなどの擬似要素の場合

contentに対しては、background-sizeが効かないので、css3のtransformを利用して半分にします。