メディアクエリ〜ページ表示する画面サイズによってスタイルの設定を変える〜

5693 ワード
CSS MediaQueries scss CSS テキストリンク
  • SCSSをいじっている際にこいつを知らなくて不覚にもｳﾝ時間も溶かしたのでメモる。
  • 雰囲気で読んでやってください

背景とやりたいこと

  • Railsのアプリケーション(SPAでない)を開発中のお話。
    • プレゼンテーション層はslim, scssファイルを使っている
  • あるページにYouTuneの動画を埋め込む。これを、
    • モバイル機器では、画面の横幅一杯に表示したい
    • タブレットとデスクトップでは幅520pxで表示したい。

解決策

(1)UserAgentによってhtmlにタグを付け分ける(最初やろうとしてた)

  • アクセスした機器のUserAgentに応じて、Railsのviewファイルをレンダリングする際にタグを動的に付与する
    • モバイル版では、以下のケースだとdivタグにmobileクラスが加わる
    • なお、「リクエスト元のUserAgentがどの端末であるかを識別するロジックをアプリケーションの内部に自前で定義している」ことが必要ある
page.html.slim

// @user_agent.mobile?とで、アクセス者がモバイルかを識別する
div class="app-movie #{'mobile' if @user_agent.mobile?}"
  iframe src="https://www.youtube.com/embed/xxxxxxxx" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"" allowfullscreen
page.scss
.app-movie {
  iframe {
    width: 100%;
  }
  &.mobile {
    iframe {
      width: 520px;
    }
  }
}

CSSファイルの中でメディアクエリを使う(最終的にこっちを採用)

  • 一発だった。
page.html.slim
div class="app-movie"
  iframe src="https://www.youtube.com/embed/xxxxxxxx" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"" allowfullscreen
page.scss

app-movie {
  iframe {
    // TO読者: 閾値の設定はこの記事を参考にしないでください
    @media screen and (max-width:767px) {
      width: 100%;
    }
    @media screen and (min-width:768px) and (max-width:979px) {
      width: 520px;
    }
    @media screen and (min-width:980px) {
      width: 520px;
    }
  }
}
  • メディアクエリの使い方をもう少し細かく知りたい時はこちらを参照しよう。

補足

move_ベースソース解析
NodeJS-学習ノート