HTML <style> media egenskab

HTML <style> etiket

Definition og brug

media Egenskab bruges til at specificere, hvilke medier/enheder CSS-stilen er målrettet (optimeret) til.

Denne egenskab bruges til at specificere, hvilke enheder (som iPhone) eller medier (som tale eller udskrift) stilen skal anvendes på.

Tip:Denne egenskab kan acceptere flere værdier.

Eksempel

Eksempel 1

Angiv stilarter, der skal bruges til udskrift:

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

Prøv det selv

Eksempel 2

Brug width-egenskaben i media-attributten til at skille mellem to grupper stilarter:

<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>

Prøv det selv

Bemærk:Brug første gruppe stilarter, når browservinduesbredden er mindre end 500 pixels, og brug anden gruppe stilarter, når vinduesbredden er større end 500 pixels.

Syntaks

<style media="value">

Mulige operatører

Operatører Beskrivelse
and Angivelse af AND-operators.
not Angivelse af NOT-operators.
, Angivelse af OR-operators.

Betingelserne for brug af stil kan designes meget detaljeret. Det første, der skal klart fastlægges, er den målrettede enhedstype. Tabellen nedenfor opsummerer alle værdier, der opfylder kravene:

Enhed

Enhed Beskrivelse
all Standard. Gælder for alle enheder.
aural Røvsyntese.
braille Blindtastaturfeedbackenheder.
handheld Håndholdte enheder (lille skærm, begrænset bredbånd).
projection Projektor.
print Printforespørgselstilstand / printside.
screen Computerdisplay.
tty Telexmaskiner og lignende medier, der bruger en fast mellemrumstegnsnet.
tv Televisionsenheder (lav opløsning, begrænset rulleevne).

Browseren er ansvarlig for at fortolke enhedsklassifikation. Nogle enhedstyper (som f.eks. screen og print) har en ret ensartet fortolkning på forskellige browsere, men for andre enheder (som f.eks. handheld) kan fortolkningen være meget forskellig. Derfor er det meget vigtigt at kontrollere, om fortolkningen af den målrettede browser for den specifikke enhed er ens med din egen.

Karakteristika

Karakteristika Beskrivelse
width

Definerer bredden for mål visningsområde.

Prefixer "min-" og "max-" kan bruges.

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

Definerer højden for mål visningsområde.

Prefixer "min-" og "max-" kan bruges.

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

Definerer bredden for mål skærm/papir.

Prefixer "min-" og "max-" kan bruges.

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

Definerer højden for mål skærm/papir.

Prefixer "min-" og "max-" kan bruges.

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

Definerer retningen for mål skærm/papir.

Tilladte værdier: portrait eller landscape.

This feature does not have any qualifiers.

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

Definerer breddet/højde-forhold for mål visningsområde.

Prefixer "min-" og "max-" kan bruges.

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

Definerer enhedsbredde/enhøjde-forhold for mål skærm/papir.

Prefixer "min-" og "max-" kan bruges.

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

Definerer antallet af bits per farve for mål skærm.

Prefixer "min-" og "max-" kan bruges.

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

Definerer antallet af farver, som mål skærm kan håndtere.

Prefixer "min-" og "max-" kan bruges.

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

Definerer antallet af bits per pixel i monokrom framebuffer.

Prefixer "min-" og "max-" kan bruges.

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

Definerer pixels densitet (dpi eller dpcm) for mål skærm/papir.

Prefixer "min-" og "max-" kan bruges.

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

Definerer skanningsmodus for fjernsyn.

Tilladte værdier er progressive og interlace.

This feature does not have any qualifiers.

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

Specify whether the output device is a grid or bitmap.

Grid-type devices use a fixed grid to display content, such as character-based terminals and pagers with single-line displays.

The supported values are 0 and 1 (1 represents grid-type devices).

This feature does not have any qualifiers.

For example: media="handheld and (grid:1)"

The width and other properties are often used in conjunction with the qualifiers min and max. Without these qualifiers, the use of styles can depend on very precise window sizes, but adding qualifiers makes the conditions more flexible.

The table above lists and describes the various features available. Unless otherwise specified, these features can be modified with min- and max- to form thresholds rather than precise values.

As with the conditions of specified devices, these features are also interpreted by the browser. The specifics of which features the browser recognizes and when they are considered to exist and can be used are varied and complex. If you are to apply styles based on these features, it is essential to perform comprehensive testing and be prepared with fallback styles in case the expected features are not available.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <style> etiket