パーセントベースサイジングによるレスポンシブスプライトシート

レスポンシブスプライトシート

レスポンシブデザインではビューポートに合わせてスケーリングする要素が必要です。標準スプライトCSSは固定ピクセル値を使用しますが、レスポンシブスプライトはパーセントベースの技術で異なる画面サイズに適応します。

課題

固定ピクセルスプライトにはレスポンシブレイアウトで問題があります：

/* これはコンテナに合わせてスケーリングしない */
.icon {
  width: 32px;
  height: 32px;
  background-position: -64px -32px;
}

パーセントベースのbackground-position

background-size使用時、background-positionはピクセルオフセットではなくスプライトシートグリッドを参照するパーセンテージを使用できます：

4列、2行の均一セルスプライトシートの場合：

.responsive-sprite {
  width: 100%;
  padding-bottom: 100%; /* アスペクト比を維持 */
  background-image: url('sprites.png');
  background-size: 400% 200%;
}

.sprite-item {
  background-position: 66.667% 100%;
}

パーセント計算式

background-size: (列数 * 100)% (行数 * 100)%

X位置: (列 / (列数 - 1)) * 100%
Y位置: (行 / (行数 - 1)) * 100%

制限事項

• パーセントベースの位置指定はすべてのスプライトが均一サイズの場合のみ正しく機能
• 混合サイズスプライトにはピクセルベースの位置指定が必要
• サブピクセルレンダリングが特定のサイズでわずかなぼやけを引き起こす可能性
• 真に解像度独立なアイコンにはSVGスプライトの使用を検討