CSS3 メディアについて詳しく見る

css3 Media

Media Typeメディアタイプ

メディアタイプはCSS2では非常に便利な属性です。メディア タイプを使用すると、デバイスごとに異なるスタイルを指定できます。
W3C では、表に示すように、合計 10 種類のメディア タイプをリストしています。目の見えない人

エンボス点字タイプライターハンドヘルドポータブルデバイス印刷印刷用紙または印刷プレビュービュー投影各種投影装置画面コンピュータモニタースピーチスピーチまたはオーディオシンセサイザーTVテレビタイプのデバイスTtyテレタイプライターや端末など、固定密度の文字グリッドを使用するメディアlink メソッド

<link>

xml メソッド

<?xml-stylesheet  type="text/css" media="screen" href="style.css">

どこの画面、すべて、および印刷は、最も一般的な 3 つのメディア タイプです。	メディア タイプ参照メソッド
	: <link> タグがスタイルを参照するときにメディア タイプを導入し、media 属性を通じてさまざまなメディア タイプを指定します。
	: リンクによって導入されるメディア タイプと同様に、メディア属性によっても指定されます。

@import メソッド: @import はスタイル ファイルの参照に使用されるメソッドの 1 つであり、型の参照にも使用できます。 @importメディア タイプを導入するには、主に 2 つの方法があります。

1 つは、スタイル ファイルの @import を介して別のファイルを呼び出す方法です。

@import url(style.css) screen;

もう 1 つは、タグ

@media screen and (max-width:480px){
    p{
        width:400px;
    }
}

@media方法：@media是CSS3中新引进的特性，称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与@import类似，也有两种类型。

一种是在样式文件中通过@mediaメディアクエリメディアプロパティ

メディアプロパティはCSS3メディアタイプの拡張バージョンです。

W3C は、次の表に示すように、CSS3 で一般的に使用される合計 13 個の機能をリストしています。

のための各色のバイト数

color-index

integer

Yes

カラーテーブル内の色の数device-aspect-ratiointeger/integerYesアスペクト比 device-heightLengthYesデバイス画面の出力高さdev ce-widthLengthYesデバイス画面の出力幅grid整数いいえラスターベースのデバイスかどうか高さ長さはいレンダリングされたページの高さモノクロ整数はいピクセルあたりのバイト数解像度解像度 (dpi/dpcm)はい解像度スキャンプログレッシブインターレースいいえTVメディアタイプスキャン方法幅長さはいレンダリングインターフェイスの幅向きポートレート/ランドスケープいいえ水平または垂直画面

Media Query使用方法

@media 媒体类型 and (媒体特性){/*样式*/}

　　使用Media Query时必须要使用@media开头，然后指定媒体类型，随后是指定媒体特性。

1. 最大宽度max-width

   max-width是媒体特性中最常用的一个特性，意思是指媒体类型小于或等于指定的宽度时，样式生效。

   @media screen and (max-width:480px){
       p{
           width:400px;
       }
   }

   意思是当屏幕小于或等于480px时，p的宽度被重置为400px。

2. 最小宽度min-width

   min-width与max-width相反，即媒体类型大于或等于指定宽度时，样式生效。

   @media screen and (min-width:900px){
       p{width:900px;}
   }

   当最小宽度等于或大于900px时，p的宽度重置为900px

3. 多个媒体特性使用

   Media Query可以使用关键词“and”将多个媒体特性结合在一起。

   @media screen and (min-width:400px) and (max-width:600px){
       p{
           background:red;
       }
   }

   当屏幕宽度在400px~600px时，p的背景色变为红色。

4. 设备屏幕的输出宽度Device width

   还可以根据屏幕尺寸设置相应的样式

   <link>

   样式适用于最大宽度为500px，这里的max-device-width所指的是实际分辨率，也就是指可视面积分辨率。

5. not关键词

   关键词not用来排除某种制定的媒体类型，也就是说对后面的表达式执行取反操作。

   @media not print and (max-widht:1200px){/*样式*/}

   样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

6. only关键词

   only用来指定某种特定的媒体类型，可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备，就不会读取样式，因为先读取的是only而不是screen；不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。

   <link>

CSS3 媒体特性完。

(モノクロ)フレームバッファ

以上がCSS3 メディアについて詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。