HTML <style> media eigenschap

HTML <style> tag

Definition and usage

media Attribute used to specify the media/device that the CSS style targets (optimizes).

This attribute is used to specify the style that applies to a specific device (such as iPhone), voice, or print media.

Tip:This attribute can accept multiple values.

Instance

Example 1

Define the styles used for printing:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Try it yourself

Example 2

The width attribute of the media attribute is used to distinguish between the two groups of styles:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Try it yourself

注释：When the browser window width is less than 500 pixels, the first group of styles is used, and when the window width is greater than 500 pixels, the second group of styles is used.

语法

<style media="value>

可能的运算符

运算符 Beschrijving
and 规定的 AND 运算符。
not 规定的 NOT 运算符。
, 规定的 OR 运算符。

The usage conditions for styles can be designed very meticulously. The first thing to clarify is the type of device being targeted. The following table summarizes all the values that comply with the regulations:

Device

Device Beschrijving
all Default. Suitable for all devices.
aural Speech synthesizer.
braille Braille feedback devices.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Teletype machines and similar media using a fixed spacing character grid.
tv Television-type devices (low resolution, limited scrolling capabilities).

The browser is responsible for interpreting device classification. Some device types (such as screen and print) have a relatively consistent interpretation across different browsers, but others (such as handheld) may have more arbitrary interpretations. Therefore, it is very necessary to verify that the interpretation of the specific device by the targeted browser is consistent with your own.

Eigenschappen

Eigenschappen Beschrijving
width

Bepaalt de breedte van het doelbeeldscherm.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (min-width:500px)"
height

Bepaalt de hoogte van het doelbeeldscherm.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (max-height:700px)"
device-width

Bepaalt de breedte van het doelbeeldscherm/papier.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (device-width:500px)"
device-height

Bepaalt de hoogte van het doelbeeldscherm/papier.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (device-height:500px)"
orientation

Bepaalt de richting van het doelbeeldscherm/papier.

Ondersteunde waarden: portrait of landscape.

Deze eigenschap heeft geen beperkingen.

Bijvoorbeeld: media="all and (orientation: landscape)"
aspect-ratio

Bepaalt de ratio van de breedte/hoogte van het doelbeeldscherm.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Bepaalt de ratio van de apparatuurbreedte/apparaathoogte van het doelbeeldscherm/papier.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (aspect-ratio:16/9)"
color

Bepaalt het aantal bits per kleur op het doelbeeldscherm.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (color:3)"
color-index

Bepaalt het aantal kleuren dat het doelbeeldscherm kan verwerken.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (min-color-index:256)"
monochrome

Bepaalt het aantal bits per pixel in een monochroom framebuffer.

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="screen and (monochrome:2)"
resolution

Bepaalt de pixeldichtheid van het doelbeeldscherm/papier (dpi of dpcm).

Je kunt de voorvoegsels "min-" en "max-" gebruiken.

Bijvoorbeeld: media="print and (resolution:300dpi)"
scan

Bepaalt het scanpatroon van het televisie.

Ondersteunde waarden zijn progressive en interlace.

Deze eigenschap heeft geen beperkingen.

Bijvoorbeeld: media="tv and (scan:interlace)"
grid

Bepaal of de uitvoerapparaat een grid of een bitmap is.

Grid-apparaten gebruiken een vaste grid om inhoud weer te geven, zoals op basis van tekens gebaseerde terminals en eenzijdige weergave-pager.

De ondersteunde waarden zijn 0 en 1 (1 staat voor een grid-apparaat).

Deze eigenschap heeft geen beperkingen.

Bijvoorbeeld: media="handheld and (grid:1)"

De eigenschappen zoals width worden meestal samen gebruikt met de beperkingen min en max. Het is ook mogelijk om stijlen te gebruiken waarbij de gebruik van stijlen afhankelijk is van zeer nauwkeurige venstersizes, maar met de beperkingen wordt de voorwaarde flexibeler.

De tabel hierboven lijst en beschrijft de beschikbare functies. tenzij anders aangegeven, kunnen deze functies worden aangepast met min- en max- om een grenswaarde in plaats van een nauwkeurige waarde te vormen.

Net als met de specifieke apparaten, zijn deze functies ook verantwoordelijk door de browser om te interpreteren. Wat de browser herkent als functies en wanneer deze functies bestaan en beschikbaar zijn, is zeer divers. Als u stijlen wilt toepassen op basis van deze functies, moet u grondig testen en back-upstijlen voorbereiden voor het geval de verwachte functies niet beschikbaar zijn.

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

HTML <style> tag