Erfahren Sie mehr über CSS3-Medien

CSS3-Medien

Medientyp Medientyp

Der Medientyp ist ein sehr nützliches Attribut in CSS2. Mithilfe von Medientypen können Sie unterschiedliche Stile für unterschiedliche Geräte festlegen.
W3C listet insgesamt zehn Medientypen auf, wie in der Tabelle gezeigt:

值	设备类型
all	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打字机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
TV	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

Unter ihnen sind Bildschirm, Alle und Druck die drei häufigsten Medientypen.

Medientyp-Referenzmethode

1. Link-Methode: Geben Sie den Medientyp ein, wenn das <link>-Tag auf den Stil verweist, und geben Sie ihn an das Medienattribut Verschiedene Medientypen.

   <link>

2. XML-Methode : Ähnlich wie der durch Link eingeführte Medientyp wird er auch über das Medienattribut angegeben.

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

3. @import方法: @import ist eine der Methoden zum Referenzieren von Stildateien und kann auch zum Referenzieren von Typen verwendet werden. @importEs gibt im Wesentlichen zwei Möglichkeiten, Medientypen einzuführen.

   Eine besteht darin, eine andere Datei über @import in der Stildatei aufzurufen.

   @import url(style.css) screen;

   Die andere besteht darin, sie im Tag

   <style>
       @import url(style.css) screen;
   </style>

4. @media方法: @media ist eine neu eingeführte Funktion in CSS3, die als Medienabfragen bezeichnet wird. Über dieses Attribut können Medientypen in die Seite eingeführt werden. Ähnlich wie bei @import gibt es zwei Typen.

   Eine besteht darin, den Medientyp über @media in der Stildatei zu referenzieren.

   @media screen{
       选择器{/*样式*/}
   }

   Die andere besteht darin, ihn im Tag

   <style>
       @media screen{
           选择器{/*样式*/}
       }
   </style>

Die oben genannten vier Methoden können alle auf Medientypen verweisen. Es wird empfohlen, die erste und vierte Methode zu verwenden.

Medienabfrage-Medieneigenschaften

Medieneigenschaften sind eine erweiterte Version von CSS3-Medientypen.
W3C listet 13 häufig verwendete Funktionen in CSS3 auf, wie in der Tabelle gezeigt:

属性	值	Min/Max	描述
color	整数	Yes	每种色彩的字节数
color-index	整数	Yes	色彩表中的色彩数
device-aspect-ratio	整数/整数	Yes	宽高比例
device-height	Length	Yes	设备屏幕的输出高度
device-width	Length	Yes	设备屏幕的输出宽度
grid	整数	No	是否基于栅格的设备
height	Length	Yes	渲染页面的高度
monochrome	整数	Yes	单色帧缓冲器中每像素字节
resolution	分辨率(dpi/dpcm)	Yes	分辨率
scan	Progressive interlaced	No	Tv媒体类型的扫描方式
width	Length	Yes	渲染界面的宽度
orientation	portrait/landsscape	No	横屏或竖屏

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 媒体特性完。

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über CSS3-Medien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!