レスポンシブサイト制作で気になるサイズ
レスポンシブサイトの背景に動画を埋め込む際に、ＰＣで表示する場合とスマートフォンで表示する場合で、どの解像度で動画を用意すればいいかを考える際に必要な参考値をメモ。
ブレークポイント
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
参考ページ