HTML5-Medienabfrageanweisung besteht aus einem Medientyp und einem oder mehreren bedingten Ausdrücken zur Erkennung von Medieneigenschaften; die Medieneigenschaften, die zur Erkennung in Medienabfragen verwendet werden können, umfassen Breite, Höhe, Farbe usw.; Sie können die Seite wechseln, ohne den Inhalt zu ändern. Der Anzeigeeffekt wird für bestimmte Ausgabegeräte angepasst.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, DELL G3-Computer
Was ist die HTML5-Medienabfrageanweisung?
HTML5-Medienabfragen
- Was sind Medienabfragen?
Medienabfragen ermöglichen es uns, CSS-Stile basierend auf den Eigenschaften der Geräteanzeige festzulegen (z. B. Ansichtsfensterbreite, Bildschirmverhältnis, Geräteausrichtung: Querformat oder Hochformat). Medienabfragen bestehen aus Medientypen und einer oder mehreren Bedingungen zur Erkennung von Medieneigenschaften . Ausdruckskomposition. Medieneigenschaften, die in Medienabfragen erkannt werden können, sind width , height und color (usw.). Mithilfe von Medienabfragen können Sie den Anzeigeeffekt für bestimmte Ausgabegeräte anpassen, ohne den Seiteninhalt zu ändern.
- Die Anwendbarkeit von Medienabfragen und flexiblem Box-Layout
Medienabfragen: Am besten verwenden Sie Medienabfragen, wenn sich die Struktur der Seite ändert. Flexible Box: Wenn sich nur die Breite und Höhe ändern, versuchen Sie, die flexible Box zu verwenden. Geben Sie dann den Medientyp (auch Gerätetyp genannt) an, gefolgt von den angegebenen Medieneigenschaften (auch Geräteeigenschaften genannt). Die Schreibmethode für Medieneigenschaften ist der Schreibmethode für Stile sehr ähnlich. Sie ist hauptsächlich in zwei Teile unterteilt. Der erste Teil bezieht sich auf die Medieneigenschaften und der zweite Teil ist der durch die Medieneigenschaften angegebene Wert zwischen den beiden Teilen verwendet. Zum Beispiel:
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.class {
display: none;
}
}
</style>Anders als CSS-Attribute verwenden Medieneigenschaften Min/Max, um größer als gleich oder kleiner als als logische Beurteilung darzustellen, anstatt Symbole wie kleiner als (<) und größer als (>) zu verwenden. zu urteilen.
- Medientyp
alle
| Bildschirm | |
|---|---|
| -Medienattribut |
Breite
| Höhe | |
|---|---|
| ?? - 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。 @media screen and (max-width:580px){
body {
background-color: red;
}
}Nach dem Login kopieren
- 最小宽度min-width “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){
.wrapper{width: 980px;}
}Nach dem Login kopieren
- 多个媒体特性使用 Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。 当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。 @media screen and (min-width:600px) and (max-width:900px){
body {background-color:blue;}
}Nach dem Login kopieren - 设备屏幕的输出宽度Device Width 在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> Nach dem Login kopieren 上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。 -逗号分隔列表 当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。 例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样： @media (min-width: 700px),handheld and (orientation: landscape) { ... }Nach dem Login kopieren 如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。 - not关键词 使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如： @media not print and (max-width: 1200px){样式代码}Nach dem Login kopieren
- only关键词 only操作符表示仅在媒体查询匹配成功时应用指定样式。 可以通过它让选中的样式在老式浏览器中不被应用 media="only screen and (max-width:1000px)"{...}Nach dem Login kopieren 上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式 media="screen and (max-width:1000px)"{...}Nach dem Login kopieren 上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略 - 在Media Query中如果没有明确指定Media Type，那么其默认为all，如： <link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /> Nach dem Login kopieren -在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" /> Nach dem Login kopieren 上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。 推荐学习：《HTML5视频教程》 |
Das obige ist der detaillierte Inhalt vonWas ist die HTML5-Medienabfrageanweisung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
