https://qwerty.work/tags/%E5%8F%82%E8%80%83%E5%80%A4/ Recent content in 参考値 on qwerty.work Hugo -- gohugo.io ja-JP Sat, 27 Nov 2021 15:36:37 +0900 https://qwerty.work/post/2021/11/responsive-size/ Sat, 27 Nov 2021 15:36:37 +0900 https://qwerty.work/post/2021/11/responsive-size/ <h2 id="レスポンシブサイト制作で気になるサイズ">レスポンシブサイト制作で気になるサイズ </h2><p>レスポンシブサイトの背景に動画を埋め込む際に、ＰＣで表示する場合とスマートフォンで表示する場合で、どの解像度で動画を用意すればいいかを考える際に必要な参考値をメモ。</p> <h3 id="ブレークポイント">ブレークポイント </h3><p>CSSフレームワークを使った場合の画面横幅の参考。単位はピクセル。</p> <h4 id="bootstrap">Bootstrap </h4><ul> <li>Extra extra large（xxl）: 1400以上</li> <li>Extra large（xl）: 1200以上</li> <li>Large （lg）: 992以上</li> <li>Medium（md）: 768以上</li> <li>Small（sm）: 576以上</li> <li>Extra small（xs）: 576未満</li> </ul> <h4 id="pure-css">Pure CSS </h4><ul> <li>Extra large（xl）: 1280以上</li> <li>Large （lg）: 1024以上</li> <li>Medium（md）: 768以上</li> <li>Small（sm）: 568以上</li> </ul> <h4 id="参考ページ">参考ページ </h4> <div class="link-card"> <a href="https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options" alt="https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options</span> <span class="link-card-url">https://getbootstrap.jp/docs/5.0/layout/grid/#grid-options</span> </div> </a> </div> <div class="link-card"> <a href="https://purecss.io/grids/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://purecss.io/grids/" alt="https://purecss.io/grids/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://purecss.io/grids/</span> <span class="link-card-url">https://purecss.io/grids/</span> </div> </a> </div> <h3 id="動画の解像度">動画の解像度 </h3><p>アスペクト比 16:9 の解像度。単位はピクセル。</p> <ul> <li>4320p: 7680×4320（8K）</li> <li>2160p: 3840×2160（4K）</li> <li>1440p: 2560×1440（2K）</li> <li>1080p: 1920×1080（フルHD）</li> <li>720p: 1280×720（HD）</li> <li>480p: 854×480</li> <li>360p: 640×360（SD）</li> <li>240p: 426×240</li> </ul> <h4 id="参考ページ-1">参考ページ </h4> <div class="link-card"> <a href="https://support.google.com/youtube/answer/6375112" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://support.google.com/youtube/answer/6375112" alt="https://support.google.com/youtube/answer/6375112" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://support.google.com/youtube/answer/6375112</span> <span class="link-card-url">https://support.google.com/youtube/answer/6375112</span> </div> </a> </div>