CSS – @media(メディアタイプ)

[css title=”css”]
@media print {
/* 印刷時の設定 */
}
[/css]

以下、文言おかりしました。

all 全てのデバイス
aural 音声合成装置
braille 点字出力デバイス
handheld 携帯電話など、画面が小さいデバイス
print プリンタでの印刷、あるいは印刷のプレビュー画面
projection プロジェクタ。Opera のフルスクリーンモード時もこれに該当します
screen 一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象になります
tty テレタイプなど、表示文字幅が固定されたデバイス
tv テレビなど、解像度や色数に制限があるデバイス

以下は、Google Developersから抜粋

属性 結果
min-width ブラウザの幅がクエリに定義された値より広い場合にルールが適用されます。
max-width ブラウザの幅がクエリに定義された値より狭い場合にルールが適用されます。
min-height ブラウザの高さがクエリに定義された値より高い場合にルールが適用されます。
max-height ブラウザの高さがクエリに定義された値より低い場合にルールが適用されます。
orientation=portrait ブラウザの高さが、幅と同じかそれ以上の場合にルールが適用されます。
orientation=landscape ブラウザの幅の値が、高さよりも大きい場合にルールが適用されます。

コメント

タイトルとURLをコピーしました