応答性のCSSの分離メディアファイル
メディアについて
1.メディアクエリー、独自のCSS3追加
メディアクエリ式は、出力の特定の範囲のためのコンテンツの表示を可能に、組成物のメディア機能を使用して、オプションのメディアタイプと、ゼロ以上のスタイルシートの適用範囲を制限2.コンテンツ自体を変更せずに機器や作物、
文法
1.メディアクエリは、オプションのメディアタイプとメディアの特性式（0以上）が含まれ、最終的に真または偽に解決され
、クエリで指定されたデバイスのメディアタイプがメディアタイプが文書を表示するために使用されて一致した場合2.と式の値のすべてが真である場合、メディアクエリの結果が真であります
demo
@media (max-width: 600px) {
.sidebar {
display: none;
}
}論理演算子
そして
オペレータ及びメディア属性クエリに複数のメディアグループに使用され、要求に鎖の特徴、各属性は、結果が真である場合にのみ、真であります
@media (min-width: 700px) and (orientation: landscape) {
/* Write css 仅在可视区域宽度不小于700像素并在横屏时有效*/
}カンマ区切りリスト
クエリまたはコンマで区切られた論理演算子と同様の効果に使用されるメディア。カンマで区切られたメディアクエリを使用する場合は任意のメディアクエリが返した場合、真のスタイルが効果的です
@media (min-width: 700px), handheld and (orientation: landscape) {
/* 在最小宽度为700像素或是横屏的手持设备上应用一组样式 */
/* orientation: portrait 竖屏 */
}ではありません
キーワードは、メディアクエリーは真が偽を返すには全体メディアクエリには適用されない
だけでなく、全体のキーワードクエリに適用されますが、別の独立した調査に適用することはできません
@media not all and (monochrome) {
}に相当
@media not (all and (monochrome)) {
}のみ
古いブラウザは、メディアクエリのプロパティをサポートしていません防ぎ、特定のスタイルを適用
@media only screen and (color) {
}メディアクエリスタイルの分離
我々は、一般的に書き込み、ファイルに書き込まれたすべてのメディアクエリーCSSを置く必要はありません
<link rel="stylesheet" href="common.css">
<link media="(min-width: 500px)" rel="stylesheet" href="desktop.css">
<link media="(max-width: 500px)" rel="stylesheet" href="mobile.css">desktop.cssとmobile.css直接クエリを記述していない、その上にパターンを書きます