ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS の Media メディア クエリの詳細な説明

CSS の Media メディア クエリの詳細な説明

青灯夜游
リリース: 2020-10-28 17:56:52
転載
3664 人が閲覧しました

CSS の Media メディア クエリの詳細な説明

レスポンシブ デザインに関して言えば、メディア クエリ メディアは切っても切れない関係にあります。一般に、メディア クエリは CSS3 に新しく追加されたものだと考えられていますが、実際には CSS2 はすでに存在しており、CSS3 では新しいメディア属性と使用シナリオが追加されています (IE8 ブラウザではサポートされていません)。この記事では、メディア クエリとは何かについて詳しく説明します。

(推奨チュートリアル: CSS チュートリアル )

メディア タイプ

CSS2 では、メディアクエリは

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

画面 コンピュータ画面 (デフォルト)
tty - でもでも
デバイス (小さな画面、限られた帯域幅)
print 印刷プレビュー モード/印刷ページ
braille 視覚障害者用の点字フィードバック デバイス
聴覚音声合成装置
all すべてのデバイスに適しています


すべてのブラウザと互換性があり、実際に広く使用されているメディア タイプは、「screen」と「all」です
<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}    
</style>
<div class="box"></div>
ログイン後にコピー

メディア属性メディア属性は、CSS3 の新しいコンテンツです。ほとんどのメディア属性には、「以下」を表すために使用される「min-」と「max-」というプレフィックスが付いています。 「に等しい」と「以上」。これにより、HTML および XML と競合する「<」および「>」文字の使用が回避されます。

[注意] メディア属性は角かっこ () で囲む必要があります。そうしないと無効になります。

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

width | min-width | max-width

height | min-height | max-height

デバイスの幅 | 最小デバイスの幅 | 最大デバイスの幅

デバイスの高さ | 最小デバイスの高さ | 最大デバイスの高さ

アスペクト比| 最小アスペクト比 | 最大アスペクト比

デバイス アスペクト比 | 最小デバイス アスペクト比 | 最大デバイス アスペクト比

カラー | 最小カラー| 最大カラー

カラーインデックス | 最小カラーインデックス | 最大カラーインデックス

モノクロ | 最小モノクロ | 最大モノクロ

解像度 | 最小 -解像度 | 最大解像度

scan | グリッド

【1】カラー(色)

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

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

<style>
@media (color){
    .box{height: 100px;width: 100px;background-color: lightblue;}    
}    
</style>
<div class="box"></div>
ログイン後にコピー

[2]カラー インデックス (color-index)

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

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

#
<style>
@media (min-color-index: 256){
    .box{height: 100px; width: 100px;background-color: lightgreen;}    
}    
</style>    
<div class="box"></div>
ログイン後にコピー

#【3】アスペクト比 (aspect-ratio)

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

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

<style>
@media (min-aspect-ratio: 1/1) {
    .box{height: 100px;width: 100px; background-color: lightgreen; }        
}
</style>
<div class="box"></div>
ログイン後にコピー

[4]デバイス アスペクト比

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

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

<style>
@media (device-aspect-ratio:16/9) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>
ログイン後にコピー

[5]Device-height

デバイスの高さは、出力デバイスの高さ

最小高さ 1000px

<style>
@media (min-device-height: 1000px) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>
ログイン後にコピー

[6]Device-width(device-width)# の画面に表示されるドキュメントにスタイル シートを適用します。

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

<style>
@media (min-device-width: 1000px) {
    .box{ height: 100px; width: 100px;background-color: lightblue; }        
}
</style>
<div class="box"></div>
ログイン後にコピー

[7] Grid (グリッド)

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

<style>
@media (grid:0) {
    .box{height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>
ログイン後にコピー

[8]高さ (高さ)

高さは、出力デバイスのレンダリング領域を表します (可能な場合)。表示領域の高さまたはプリンタ トレイの高さ)800 ピクセルの表示可能領域を超える高さのデバイスにスタイル シートを適用します

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>
ログイン後にコピー

[9]幅 ( width)

Width は出力デバイスのレンダリング領域の幅を表します 表示領域で幅が 800px を超えるデバイスにスタイル シートを適用します

<style>
@media (min-width:800px) {
    .box{ height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>
ログイン後にコピー

[10] 白黒(モノクロ)

黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为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文件依然被下载

CSS の Media メディア クエリの詳細な説明

逻辑操作符:

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

media="only screen and (max-width:1000px)"{...}
ログイン後にコピー

上面这行代码,在老式浏览器中被解析为media="only",因为没有一个叫only的设备,所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}
ログイン後にコピー

上面这行代码,在老式浏览器中被解析为media="screen",它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以,在使用媒体查询时,only最好不要忽略

方法

window.matchMedia()方法用来检查CSS的mediaQuery语句

[注意]IE9-浏览器不支持,可以使用第三方函数库matchMedia.js

属性

window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有media和matches两个属性。

media:返回所查询的mediaQuery语句字符串

matches:返回一个布尔值,表示当前环境是否匹配查询语句

var result = window.matchMedia(&#39;(min-width: 600px)&#39;);
console.log(result.media); //&#39;(min-width: 600px)&#39;
console.log(result.matches); // true
ログイン後にコピー

可以根据matchMedia()方法的matches属性的不同结果,进行对应的设置

var result = window.matchMedia(&#39;(min-width: 600px)&#39;);
if (result.matches) {
  //
}else{
 //
}
ログイン後にコピー

[注意]如果window.matchMedia无法解析mediaQuery参数,matches属性返回的总是false,而不是报错

var result = window.matchMedia(&#39;123&#39;);
console.log(result.matches);//false
ログイン後にコピー

事件

window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);
ログイン後にコピー

注意,只有mediaQuery查询结果发生变化时,才调用指定的回调函数

所以,如果想要mediaQuery查询未变化时,就显示相应效果,需要提前调用一次函数

下面这个例子是当页面宽度小于1000px时,页面背景颜色为品红色;否则为淡蓝色

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
  if (mql.matches) {
    document.body.background = &#39;pink&#39;;
  }else{
      document.body.background = &#39;lightblue&#39;;
  }
}
ログイン後にコピー

打印样式

媒体查询的一个常用功能是打印样式的设置,主要是背景清除、字体颜色变黑等

@media print{
    *,*:before,*:after{
        background:transparent!important;
        color:#000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,a:visited{
        text-decoration: underline;
    }
    a[href]:after{
        content:"(" attr(href) ")";
    }
    abbr[title]:after{
        content:"(" attr(title) ")";
    }
    a[href^="#"]:after,a[href^="javascript:;"]:after{
        content:"";
    }
    pre,blockquote{
        border: 1px solid #999;
        /*只有opera浏览器起作用,避免在元素内部插入分页符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素内部发生分页时,最少保留3行*/
        orphans:3;
        /*元素内部发生分页时,元素顶部最少保留3行*/
        windows:3;
    }
    h2,h3{
        /*避免在元素后面插入一个分页符*/
        page-break-after:avoid;
    }
}
ログイン後にコピー

相对单位

如果媒体查询@media使用的是相对单位,如rem,这里有一个坑需要着重强调一下。

一般而言,rem是相对于HTML的字体大小的。但是,由于媒体查询的级别非常高,它并不是HTML的子元素,不是相对于HTML,而是相对于浏览器的,而浏览器的默认字体大小是16px。

如果HTML设置字体大小为12px,设置如下媒体查询:

media="only screen and (max-width:1rem)"
ログイン後にコピー

实际上,max-width等于16px,而不是12px

而正是由于媒体查询是相对于浏览器的, 所以使用rem就没有必要,完全可以使用em来替代

media="only screen and (max-width:1em)"
ログイン後にコピー

更多编程相关知识,请访问:编程入门!!

以上がCSS の Media メディア クエリの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート