@media規則 環境による切り替え コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

@media規則

メディアによる切り替えCSS
@media
目的 ディスプレイ、印刷での切り替え、解像度での切り替えなどを実現します。
使用 すべて
background-colorが切り替わります
 
<div class="box-top">background-colorが切り替わります</div>
 
@media (min-width:0px){ /* 0px 以上で適用する */
  .box-top{
    background:#ff0000;
  }
}
@media (min-width:700px){ /* 700px以上で適用する */
  .box-top{
    background:#777777;
  }
}

タイプ

all
すべて
screen
ディスプレイ(パソコンなどの画面に表示される)
print
印刷（印刷されたもの）
aural
音声読み上げ
braile
点字
handheld
携帯（クエリの解像度によって切り替えるべき）
projection
プロジェクト
tty
固定文字幅の端末
tv
テレビ

クエリ

width
pxなどによる幅による切り替え用。用min-width、max-widthによって指定できる
height
pxなどによる高さによる切り替え用。min-height、max-heightによって指定できる
resolution
dpiによる切り替え用。min-resolution、max-resolutionによって指定できる。

@mediaによるデザイン切り替え事例

@mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS
CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
programming-cafe.com
スポンサーリンク