Media Queries

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; }
   }
   メディアクエリは次の２つを利用して該当する条件を指定する
   ● 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