【CSS】メディアクエリ orientation,hover, etc.

January 10, 2023

メディアクエリは、画面サイズや画面解像度などの閲覧状況に応じて、cssを切り替えることができる。便利なところをメモ。

@mediaで指定した条件のときに、cssを適用することができる。

〇使用例

/* 画面サイズ（横幅）が768px以上の場合に適用される */
@media screen and (min-width: 768px) {
   .sample { width: 100px; }
}

/* 画面サイズ（横幅）が769～1024pxの場合に適用される */
@media screen and (min-width: 769px) and (max-width: 1024px){
   .sample { width: 200px; }
}

@media screen and (orientation: landscape) {
   .sample { background: gray; }
}

@media screen and (orientation: portrait) {
   .sample { background: lightgray; }
}

orientationに指定できる値は、landscapeとportrait。

portrait:デバイスのviewportの高さが横幅よりも大きいか等しい。

landscape:デバイスのviewportの横幅が高さよりも大きい。

画面幅が高さよりも大きいと赤色になる

<style>
  .sample{
    background:lightgray;
    width:100px;
    height:100px;
  }
  @media screen and (orientation: landscape) {
    .sample{
      background:orangered;
    }
  }
</style>

<div class=sample></div>

@media (768px <= width <= 1024px)
768～1024pxの間だけ、赤色になる。

<style>
  .sample2{
    background:lightgray;
    width:300px;
    height:50px;
  }

  /*
  css level4　（最新のブラウザではサポートされている） では、
  @media (min-width: 768px) and (max-width: 1024px) の代わりに
  以下のように記載できる。768～1024pxの間だけ、赤色になる。
  */

  @media (768px <= width <= 1024px) {
    .sample2{
      background:orangered;
    }
  }
</style>

<div class=sample2></div>

〇ホバーができるデバイスだけホバーをさせる @madia(hover:hover)

ホバーができるデバイスでは、ホバー時に背景が黒になる。

<style>
.sample3 {
  background: lightgray;
  color: black;
}
.sample3:hover {
  background: yellow;
}

@media (hover: hover) {
  .sample3:hover {
    color: white;
    background: black;
  }
}

</style>

<div class="sample3">ホバーができるデバイスでは、ホバー時に背景が黒になる。</div>