近年では人気の、大画面の携帯電話や、iPadのようなモバイルデバイスは、モバイルデバイスと互換性があなたのウェブサイトが人気となっている作ります！モバイルデバイスの画面サイズは、広い範囲の下にあります！モバイルデバイスとも互換性があるために、メディア技術のCSS3が貢献しています。
私のブログ、携帯電話などのモバイル機器でそれを作るために、メディア・テクノロジー・CSS3のアプリケーションは、上記閲覧できます。もちろん、単にCSS3のメディア技術、優れたモバイルサイトは十分ではありません、でモバイルサイトのノートや集計、いくつかの記事はバックしていきます、持続的注意を歓迎します！
さて、前置きなしに、トピックへ次のエントリ：
A、メディアクエリーのCSS3を中国語に翻訳「メディアクエリ」で、紹介するいくつかの方法があります。
1は、ヘッドが直接引用され、実際には、すでにメディアCSS2に存在するが、彼はあなたの主な役割を懸念していない、すべてのメディアと互換性があります。あなたは、次の文言を見ている必要があります。
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />今、私たちは、あなたが書くことができ、画面のサイズと互換性がある必要があります：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" />ロード「smallscreen.css」画面が600PXの最大であるとき
2、輸入参照、スタイル、以下の文言を参照のこのよう@：
<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)"> @import url("css/style.css"); </style>style.cssには、特定の画面にロードされています
3、私は、この方法は、以下である、第三の最も一般的に使用される方法でした。
@media screen and (max-width: 600px) { 选择器 { 属性：属性值； } }スタイルで直接@media画面制御を書きます。
二、メディアクエリの特定の使用
1、最大幅、最大幅
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />その上で表される：画面未満または600PXに等しい場合、Webページをレンダリングするためにsmall.cssスタイルを使用します。
図2に示すように、最小幅幅最小
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />画面が900px以上である場合に、Webページをレンダリングするためにbig.cssスタイルを使用します。その上で表現。
3、複数のメディアクエリの使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />メディアクエリは、他の言葉で、メディアクエリは、複数の式に0を含むことができ、かつ複数のキーワードに0から含めることができ、およびメディアタイプ、複数のメディアクエリを組み合わせることができます。ASは600PX-900pxの間にスクリーンパターンstyle.cssには、ウェブページをレンダリングするときに使用されている、上記に示しました。
4、デバイス装置の出力画面の幅幅
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />上記のコードはiphone.cssスタイル480PX装置の最大幅に適用される意味、例えば、MAX-デバイス幅、デバイスの実際の解像度を示すだけでなく、表示領域の解像度を意味iPhone上に表示
5、iPhone4の
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />上記パターンのiPhone4のモバイルデバイス用に特別に書かれています。
6、アプリ
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />多くの場合、モバイルデバイス上のSafariはiPhoneとiPad同じであるが、それらは、上記の例のように、異なる方向に宣言されたアプリとは異なる、長手portrait.css（ポートレート）を使用する場合ページをレンダリングするために、ページをレンダリングするためにlandscape.cssの横（ランドスケープ）に採用。
7、アンドロイド
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />私たちは、あなたがページの別のアンドロイド携帯電話の画面解像度の再構成に解決できるように、メディアは、アンドロイド携帯電話のために、異なる解像度で特定のスタイルを提供し、クエリを使用することができます。
8、ないキーワード
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />キーワードを開発し、メディアの特定の種類を除外するために使用されていない、つまり、機器が表現を除外するために使用されて満たしています。
9、キーワードだけ
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />のみ、特定のメディアタイプを設定するには、メディアクエリをサポートしていないブラウザを除外するために使用することができます。実際には、非常に多くの場合、メディアクエリのサポート機器のメディアタイプをサポートしますが、スタイルシートを非表示にしていない人のために使用。である：メディアのプロパティ（メディアクエリ）機器、通常の呼び出しパターン、なしがある場合にのみに、この時間のサポート、メディアのプロパティをサポートしていません（メディアクエリ）メディアタイプ（メディアタイプ）デバイスが、サポート、でしょうそれは代わりに、画面の最初の読みがあるので、私は、スタイルを読んでいない。またかかわらず、サポートは唯一、スタイルが使用されていないかどうかの、メディアQqueriesブラウザをサポートしていません。
10、その他
メディアクエリでは、そのように明示的にすべてがデフォルト、そして、メディアタイプを指定しない場合：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />次のようにコンマの別の使用は、（、）、指示又は表現または並列にするために使用され
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />コードパターン上style.cssには、以下で使用さまたは幅480PXハンドヘルドデバイスに等しい、またはより大きいまたは960ピクセル幅デバイスに等しい幅をスクリーニングするために使用されます。
概要：メディアクエリは、一般的に次の属性をまとめ： 
そして、サポートされていない最大値と最小値は表で見ることができます。
次のようにブラウザが、特定の状況に適合性のIE7とIE8と互換性がありません。
上記の記事を通して、あなたはメディアの属性CSS3にない学びましたか？メッセージ交換を歓迎します！