ページを印刷は、メディアクエリにさらされた場合、最近のシステムについて学びたい、いくつかの特別な処理をして、中にMozilla Developer Networkコンテンツのライセンス私は見た記事の話は要約の利用と併せて、非常に良いです。
CSS2 /メディア
CSS2のメディアプロパティで使用することができます印刷するとき、ページの一部を非表示にする必要があるとして指定されたメディアタイプの特定のスタイルでのみ、その役割を、許可または大きな印刷するときに、あなたが特定のスタイルを作るためにメディアを使用することができ、この時間はわずか有効になります
{印刷@media
印刷スタイルに適しました/ * * /
}
<リンクのhref = "CSS / print.css" のrel = "スタイルシート" タイプ= "テキスト/ cssの" メディア= "印刷" />
人気のメディアタイプ
- すべて（すべて）、すべてのデバイスに適用されます。
- ハンドヘルドデバイスのためのハンドヘルド（携帯型）、。
- プリント（印刷）は、タブ材料の下の画面と印刷プレビューモードでドキュメントを表示します。
- このようなプロジェクタとしてプレゼンテーションを投影するための投影（プロジェクション）。
- 主にコンピュータ画面の画面（スクリーン）。
直接書き込むことができる命令で使用される場合は、スペースによってスタイルシートのメディアタイプを@media（複数の離間した良好です）
@mediaプリント{
本体{フォントサイズ：10ptの}
}
@media画面{
本体{フォントサイズ：13px}解析、エラー
}
@media画面、印刷{
本体{行の高さ：1.2}
}
CSS3 / meidiaクエリ
CSS3では、より多くのメディアクエリを追加することでより多くのメディアクエリ、CSS3メディアクエリを追加するように拡張されていて、メディア表現の異なる種類を追加することができ、一定の条件のメディア対象かどうかをチェックするために使用されます画面だけを設定することができCSS2のメディアタイプでは、アクセスして別のスタイルをアクセスするためのパッドを使用するためにPCを使用してWebページがさらに画面の画面サイズを決定することができますが、CSS3式で行うことができない場合、たとえば、メディアのこのタイプを達成するために設定されています機能。あなたは、コードを書くことができます
<！ - link要素のCSSメディアクエリ- >
<リンクのrel = "スタイルシート"メディア= "（最大幅：800ピクセル）"のhref = "example.css" />
<！ - CSSメディアクエリ内スタイルシート- >
<スタイル>
@media（最大幅：600PX）{
.facet_sidebar {
表示：なし。
}
}
</スタイル>
式が真であるとき、メディアタイプが一致していないときのみオペレータ、またはメディアタイプは、すべてのメディアタイプの代わりにデフォルトを必要とされていない場合を除き、対応するスタイルは、その効果になります。
演算子
そして
一つにまとめたクエリ機能について、およびメディアタイプとメディア機能、このような基本的なメディアクエリ、すべてのメディアに作用するmeidia機能タイプを組み合わせるためのメディア事業者の複数
@media（最小幅：700px）{...}
ただし、アプリケーションは、風景モードとメディアタイプメディア機能の組み合わせで使用し、オペレータにする可能性がある場合
@media（最小幅：700px）と（方向：横）{...}
唯一の可視ウィンドウ内の（ビューポート）上記のようなメディアクエリは最小限であり、あなたはテレビが可能なデバイスは、さらに、これを制限する場合にのみ、ときは700px横表示真返されます
@mediaテレビ（最小幅：700px）と（方向：横）{...}
カンマ区切りリスト
各クエリのクエリのコンマ区切りのリストで別のクエリとして扱われ、このシンボルのいずれかでのクエリの役割は限りクエリがあるとしてtrueを返し、スタイルがアクションになり、他のクエリに影響を与えません。
あなたは上またはハンドヘルドデバイスを有効にする700pxビューポートの最小幅で特定のスタイルをしたい場合たとえば、あなたが書くことができます。
@media（最小幅：700px）、ハンドヘルド及び（配向：ランドスケープ）{...}
ではありません
全体ではなく、スコープ演算子クエリは、それだけでfalseを返すだけで、クエリ全体の場合には使用しないtrueを返します。カンマ区切りのリストを使用する場合は、隣接するクエリに作用していないが、各クエリには作用しないとき
@media全て及び（モノクロ）{...}
実際には、このクエリは動作します
@mediaない（全て及び（モノクロ））{...}
しかし、ではないので、
@media（すべてではない）と（モノクロ）{...}
コンマ区切りのリストについては、
@mediaない画面（色）、プリント及び（色）
クエリは、このようなものです
@media（しない（画面（色）））、プリント及び（色）
のみ
唯一の事業者は、ブラウザアプリケーション固有のスタイルとメディア機能を防ぐために、メディアクエリをサポートしていません。
<リンクREL = "スタイルシート" メディア= "のみ画面（色）" HREF = "example.css" />
メディア機能
彼は、メディアがそれを備えていますどのように多くの終わりに、何度もメディア機能と言いました
- 幅：ブラウザの幅
- 高さ：ブラウザの高さ
- デバイス幅：デバイスの値の画面解像度の幅
- デバイスの高さ：デバイスの画面解像度値の高さ
- オリエンテーション：ウィンドウの値は、特性値の高さよりも大きい垂直または水平ブラウザウィンドウの方向は、幅がポートレート、風景別段に等しいです。
- アスペクト比：ブラウザのアスペクト比の値の比。
- デバイスアスペクト比：画面のアスペクト比の値の比。
- 色：どのように多くのカラー値のビットデバイス、そうでない場合はカラーデバイス、0の値
- カラーインデックス：カラーテーブル内の色の数
- モノクロ：バイトの各画素に対する単色フレームバッファ
- 解像度：解像度値、デバイスの解像度値
- スキャン：テレビ型走査装置、プログレッシブまたはインターレース
- グリッド：二つの値0または1に限定されるもので
メディアを導入する方法
紹介する2つの一般的な方法があります。
1導入のリンク方法
<リンクREL = "スタイルシート" タイプ= "テキスト/ CSS" HREF = "styleB.css" メディア= "画面と（最小幅：600PX）と（最大幅：800ピクセル）">
2、@メディア紹介
@media画面と（最小幅： 600PX）と（最大幅：800ピクセル）{
セレクタ{
プロパティ:;
}
}
ブラウザの互換性
アプリケーション
iPhone 4のために
<リンクREL = "スタイルシート" メディア= "のみ画面と（-webkit-MIN-デバイスピクセル比：2）" タイプ= "テキスト/ CSS" HREF = "iphone4.css" />
iPad用
<リンクREL = "スタイルシート"メディア= "全てと（配向：肖像）" HREF = "portrait.css"> <リンクREL = "スタイルシート"メディア= "全てと（方向：横）" HREF = "landscape.css 「>
横（ランドスケープiPadでモバイルデバイス上やiPhone上のSafariは、長手方向portrait.css（ポートレート）を使用しているとき、彼らは唯一のiPadは、例えば、上記の例のように、異なる方向に宣言されたことを除いて、同一であると、 ）landscape.cssを使用した場合。
アンドロイド用
/ * 240ピクセル的宽度* / <リンクREL = "スタイルシート"メディア= "のみ画面と（MAX-デバイス幅：240ピクセル）" HREF = "android240.css"タイプ= "テキスト/ CSS" /> / * 360px的宽度* / <リンクREL = "スタイルシート"メディア= "のみ画面と（MIN-デバイス幅：241px）および（MAX-デバイス幅：360px）" HREF = "android360.css"タイプ= "テキスト/ CSS" /> / * 480PX的宽度* / <リンクREL = "スタイルシート"メディア= "のみ画面と（MIN-デバイス幅：361px）および（MAX-デバイス幅：480PX）" HREF = "android480.css"タイプ= "テキスト/ cssの" />
参照
http://www.w3cplus.com/content/css3-media-queries
http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries