1. ホーム
  2. Webのコト
  3. レティナディスプレイ対応のcssの書き方

初回公開日
2014-8-1
最終更新日
2017-6-6

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

cssでの分岐方法

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

実際書いてみるサンプル

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

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

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

関連タグ

#coding