CSS Media メディアクエリについての深い理解

× 目次 [1]メディアタイプ [2]メディア属性 [3]構文 前の言葉 レスポンシブデザインに関して言えば、メディアクエリメディアは間違いなく切り離せないものです。一般に、メディア クエリは CSS3 に新しく追加されたものであると考えられています。実際、CSS2 はすでに存在しており、CSS3 では新しいメディア属性と使用シナリオが追加されています (IE8 ブラウザではサポートされていません)。この記事ではメディアからの問い合わせ内容を詳しく紹介します

メディアタイプ CSS2 では、メディア クエリは タグと タグでのみ使用され、メディア属性として存在します。

メディア属性は、メディアタイプごとに異なるスタイルを指定するために使用されます

リーリー すべてのブラウザと互換性があり、本当に広く使用されているメディア タイプは「screen」と「all」です

リーリー

メディアのプロパティ メディア属性は CSS3 に新しく追加されたもので、ほとんどのメディア属性には「以下」と「以上」を表すために使用される「min-」と「max-」が接頭辞として付けられます。これにより、HTML や XML と競合する「 」文字の使用が回避されます。 【注意】メディア属性は括弧()で囲む必要があります。そうでないと無効になります

すべてのメディアプロパティを以下の表に示します

リーリー

【1】カラー 出力デバイスの各ピクセル単位のビット値を指定します。デバイスが出力カラーをサポートしていない場合、値は 0 です

色を表示できるすべてのデバイスにスタイルシートを適用します

リーリー

【2】カラーインデックス(color-index)

カラーインデックスは、出力デバイスのカラールックアップテーブルのエントリの数を指定します。カラールックアップテーブルが使用されない場合、値は0になります

。 少なくとも 256 のインデックスカラーを使用するすべてのデバイスにスタイルシートを適用します (次のコードは表示されず、戻り値が 0 であることを示します)

リーリー

【3】アスペクト比 アスペクト比は、出力デバイスの対象表示領域のアスペクト比を記述します。値は、「/」で区切られた 2 つの正の整数で構成されます。水平ピクセル数 (最初の値) と垂直ピクセル数 (2 番目の値) の比率を表します

正方形またはワイドスクリーンの表示領域を持つデバイスにスタイルシートを適用する

リーリー

【4】デバイスのアスペクト比(device-aspect-ratio)

デバイスアスペクト比は、出力デバイスのアスペクト比を表します。値は、「/」で区切られた 2 つの正の整数で構成されます。水平ピクセル数(最初の値)と垂直ピクセル数(2番目の値)の比率を表します

アスペクト比 16:9 の特殊なワイドスクリーン デバイスにスタイル シートを適用します

リーリー

【5】デバイスの高さ

デバイスの高さは出力デバイスの高さを表します

高さ 1000 ピクセル以上で画面に表示されるドキュメントにスタイルシートを適用します

リーリー

【6】デバイス幅(device-width)

デバイス幅は出力デバイスの幅を表します

最小幅1000pxの画面に表示されるドキュメントにスタイルシートを適用します

リーリー

【7】グリッド

Grid は、出力デバイスがグリッド デバイスであるかビットマップ デバイスであるかを決定します。デバイスがグリッドベースの場合 (テレタイプ端末やグリフを 1 つしか表示できない電話など)、値は 1 で、それ以外の場合は 0 です

非グリッドデバイスにスタイルシートを適用する

リーリー

【8】身長

高さは、出力デバイスのレンダリング領域の高さを表します（視覚領域の高さ、プリンタートレイの高さなど）

表示領域の高さが 800px を超えるデバイスにスタイル シートを適用します

リーリー

【9】宽度（width）

宽度描述了输出设备渲染区域的宽度

向宽度大于800px的可视区域的设备应用样式表

style > @media (min-width:800px) { .box{ height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 【10】黑白（monochrome）

黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0

向非黑白设备应用样式表

style > @media (monochrome:0) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div >

【11】方向（orientation）

方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式

值：landscape(横屏) | portrait(竖屏)

向竖屏设备应用样式表

style > @media (orientation: portrait) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 【12】分辨率（resolution）

分辨率指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示

[注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

向每英寸至少90点的设备应用样式

style > @media (min-resolution: 90dpi) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div >

【13】扫描（scan）

扫描描述了电视输出设备的扫描过程

值： progressive | interlace

语法 媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

link rel ="stylesheet" href ="style.css" media ="print" >

div class ="box" > div > media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载

逻辑操作符 操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

and

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

[注意]在不使用not或only操作符的情况下，媒体类型是可选的，默认为all

满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... } 由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

@media (min-width: 700px) and (orientation: landscape) { ... } or

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符

满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... } not

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media not all and (monochrome) { ... } //等价于 @media not (all and (monochrome)) { ... } only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

[注意]经测试，无论是否使用only操作符都对结果无影响

style media ="only screen and (max-width:1000px)" > .box { width : 100px ; height : 100px ; background-color : pink ; } style > div class ="box" > div > 实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

// <![CDATA[ var all = document.getElementById('cnblogs_post_body').children; var select = [];

for(var i = 1; i < all.length; i++){ if(all[i].getAttribute('id')){ if(all[i].getAttribute('id').match(/anchor\d+$/)){ select.push(all[i]); } }

} var wheel = function(e){ e = e || event; var data; if(e.wheelDelta){ data = e.wheelDelta; }else{ data = -e.detail * 40; } for(var i = 0; i 0){ return; } if(select[i].getBoundingClientRect().top 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }

} document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false);

} oCon.children[i].onclick = function(){ change(this); } }

function change(_this){ for(var i = 2; i

CSS Media メディア クエリについての深い理解

目次

前の言葉

メディアタイプ

CSS Media メディアクエリについての深い理解