PCのみの固定レイアウト（アダプティブレイアウト）

メディアクエリでレイアウトを切り替えるものの、伸縮レイアウトと固定レイアウトを切り替えて表示するレスポンシブの方法は「アダプティブレイアウト」と呼ばれる。

  • モバイル向けレイアウトは幅100%で伸縮
  • PC向けレイアウトは幅固定

ただし、問題点として
①タブレット環境での横スクロール発生
⇒768px～999pxの幅に該当するタブレット環境でも横スクロールが発生する。JavaSctiptでデバイスとの画面幅の判定をして、viewportそのものを固定幅のものに差し替えるといった対応が必要。
②ヘッダーなどを固定表示（position: fixed）にした際、横スクロールせずに見切れてしまう
⇒固定されたヘッダーはスクロールが出ないため、右端に配置した要素が見切れてしまう。PCレイアウトでのヘッダー固定をやめるか、固定ヘッダーだけ幅100%で伸縮させるか、固定ヘッダー自体にも横スクロールバーが出るように組む必要がある。

/* メインコンテンツ */
@media screen and ( min-width: 768px ), print {
　body{
　　min-width: 1000px;  /* 横スクロール発生時に背景が途切れないように */
　}
　.container{
　　width: 1000px;  /* 横幅固定 */
　　margin: 0 auto;
　　padding: 0 15px;
　}
}

/* ヘッダー */
@media screen and ( min-width: 768px ), print {
　.header__inner{
　　width: 1000px;  /* 横幅固定 */
　　margin: 0 auto;
　　height: 100px;
　　padding: 0 15px;
　}
}
inserted by FC2 system