[自習] メディアクエリ

[2015-04-18]

メディアクエリ各種

メディアタイプの種類

メディアタイプ メディアの種類
screen 一般的なディスプレイ
print 印刷
handheld 携帯電話
projection プロジェクタ
tv テレビ
tty 文字固定デバイス
braille 点字ディスプレイ
embossed 点字プリンタ
speech 音声

画面の向きや大きさで適応CSSを変化させる

max-widthやmin-widthなどのプロパティを使用すると、出力デバイスの大きさによって、適応CSSを変更することができる。

 

@mediaのプロパティ

プロパティ 種類
width 出力デバイスの表示領域の横幅
height 出力デバイスの表示領域の高さ
device-width 出力デバイスの横幅
device-height 出力デバイスの高さ
orientation 出力デバイスの横置き、縦置きを指示
aspect-ratio 出力デバイスの縦横比
color
color-index カラー検索テーブルのエントリ数
monochrome 白黒での階調ビット数
resolution 解像度
scan TV出力の走査方式
grid 出力デバイスが、グリッドかビットマップかを指定