レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値

目次

レスポンシブサイト制作で気になるサイズ

レスポンシブサイトの背景に動画を埋め込む際に、PCで表示する場合とスマートフォンで表示する場合で、どの解像度で動画を用意すればいいかを考える際に必要な参考値をメモ。

ブレークポイント

CSSフレームワークを使った場合の画面横幅の参考。単位はピクセル。

Bootstrap

  • Extra extra large(xxl): 1400以上
  • Extra large(xl): 1200以上
  • Large (lg): 992以上
  • Medium(md): 768以上
  • Small(sm): 576以上
  • Extra small(xs): 576未満

Pure CSS

  • Extra large(xl): 1280以上
  • Large (lg): 1024以上
  • Medium(md): 768以上
  • Small(sm): 568以上

参考ページ

動画の解像度

アスペクト比 16:9 の解像度。単位はピクセル。

  • 4320p: 7680×4320(8K)
  • 2160p: 3840×2160(4K)
  • 1440p: 2560×1440(2K)
  • 1080p: 1920×1080(フルHD)
  • 720p: 1280×720(HD)
  • 480p: 854×480
  • 360p: 640×360(SD)
  • 240p: 426×240

参考ページ

前へ

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

次へ

【JS】水の波紋のようなエフェクトで演出をする『jQuery Ripples』