Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Media Queries

Media Queries

howdy39

May 11, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

Transcript

  1. Media Queries
    2018/5/11 第5回 TG社フロントエンド勉強会

    View Slide

  2. Media Queries
    Media Queries(メディアクエリ)を使用することで
    デバイスの画面幅や向きなどに応じて表示を変えることができる
    /* 横幅768px以下のすべてのデバイス */
    @media all and (max-width: 768px) {
    body { background-color: orange; }
    }
    メディアクエリは次の2つを利用して該当する条件を指定する
    ● Media Type(メディアタイプ)→ デバイスを指定
    ● Media Feature(メディア特性)→ 特性を指定

    View Slide

  3. LevelごとのW3Cプロセス
    ※ 引用 HTML標準仕様などを決める、W3Cによる勧告のプロセスとは?
    https://www.buildinsider.net/web/htmltips/0001
    Media
    Queries
    Level 3
    Media
    Queries
    Level 4 今日話すのは
    主にコレ

    View Slide

  4. メディアタイプ
    次の4つだけ覚えれば OK
    ※ 省略時は all
    他にも次のような Media Type があるが Level 4で非推奨になる予定
    tty, tv, projection, handheld, braille, embossed, aural
    all 全てに合致
    print プリンタ/ブラウザの印刷プレビューに合致
    screen print にも speech にも合致しないものすべてに合致
    speech スクリーンリーダーなどの読み上げるものに合致

    View Slide

  5. メディア特性
    メディア特性は丸括弧()で括る
    ()の中には1つのメディア特性しか入れられない
    よく使われるやつだけ紹介
    ● width
    ● height
    ● device-width
    ● device-height
    ● orientation
    ● etc...

    View Slide

  6. width
    min-width と max-width を使い、横幅によって切り替える
    ※レスポンシブデザインでよく使う
    /* 横幅が768px以下のときのスタイル */
    @media (max-width: 768px) { … }
    /* 横幅が769px以上のときのスタイル */
    @media (min-width: 769px) { … }
    デモ1(CSS でメディアクエリを使用)
    https://howdy39.github.io/study-media-queries/demo1.html
    デモ2(link タグの media 属性でメディアクエリを使用)
    https://howdy39.github.io/study-media-queries/demo2.html

    View Slide

  7. orientation
    portrait と landscape を使い、デバイスの向きに対応する
    /* 縦向きのスタイル */
    @media (orientation: portrait) { … }
    /* 横向きのスタイル */
    @media (orientation: landscape) { … }
    デモ
    https://howdy39.github.io/study-media-queries/demo3.html

    View Slide

  8. 複数の条件を設定
    “and“
    例)screen かつ 768px以下
    @media screen and (max-width: 768px) { }
    “,”
    例)screen または print
    @media screen, print { }

    View Slide

  9. おまけ

    View Slide

  10. Script からもつかえる
    <br/>const mql = window.matchMedia("(max-width: 768px)");<br/>if (mql.matches) {<br/>alert('横幅768px以下です');<br/>}<br/>
    https://www.w3.org/TR/cssom-view/#dom-window-matchmedia
    https://caniuse.com/#search=matchMedia

    View Slide

  11. 検索エンジンに、モバイルサイトの存在を知らせるため
    によく使用される
    href="https://m.yahoo.co.jp/">

    View Slide

  12. 参考サイト
    Media Queries Level 3
    https://www.w3.org/TR/css3-mediaqueries/
    Media Queries Level 4
    https://www.w3.org/TR/mediaqueries-4/
    MDN | Media Queries
    https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_quer
    ies

    View Slide