CSS @media- reël
Voorbeeld
Verander die agtergrondkleur van die <body>-element na "ligblou" wanneer die blaaiervenster 600px breed of minder is:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die @media
reël word in medianavrae gebruik om verskillende style vir verskillende mediatipes/toestelle toe te pas.
Medianavrae kan gebruik word om baie dinge na te gaan, soos:
- breedte en hoogte van die uitsigpoort
- breedte en hoogte van die toestel
- oriëntasie (is die tablet/foon in landskap- of portretmodus?)
- resolusie
Die gebruik van medianavrae is 'n gewilde tegniek om 'n pasgemaakte stylblad (responsiewe webontwerp) aan tafelrekenaars, skootrekenaars, tablette en selfone te lewer.
Jy kan ook medianavrae gebruik om te spesifiseer dat sekere style net vir gedrukte dokumente of vir skermlesers is (mediatipe: druk, skerm of spraak).
Benewens mediatipes is daar ook mediakenmerke. Mediakenmerke verskaf meer spesifieke besonderhede aan medianavrae, deur dit moontlik te maak om vir 'n spesifieke kenmerk van die gebruikeragent of vertoontoestel te toets. Byvoorbeeld, jy kan style toepas op slegs daardie skerms wat groter of kleiner is as 'n sekere breedte.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die @media-reël ten volle ondersteun.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS-sintaksis
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
betekenis van die nie , slegs en en sleutelwoorde:
nie: Die sleutelwoord nie keer die betekenis van 'n hele medianavraag om.
slegs: Die enigste sleutelwoord verhoed dat ouer blaaiers wat nie medianavrae met mediakenmerke ondersteun nie, die gespesifiseerde style toepas. Dit het geen effek op moderne blaaiers nie.
en: Die sleutelwoord en kombineer 'n mediakenmerk met 'n mediatipe of ander mediakenmerke.
Hulle is almal opsioneel. As jy egter nie of net gebruik nie , moet jy ook 'n mediatipe spesifiseer.
Jy kan ook verskillende stylblaaie vir verskillende media hê, soos hierdie:
<link rel="stylesheet" media="screen and (min-width:
900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width:
600px)" href="smallscreen.css">
....
Media tipes
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
Media-kenmerke
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Meer voorbeelde
Voorbeeld
Versteek 'n element wanneer die blaaier se breedte 600px wyd of minder is:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Voorbeeld
Gebruik medianavrae om die agtergrondkleur op laventel te stel as die uitsigpoort 800 pieksels wyd of wyer is, na liggroen as die uitsigpoort tussen 400 en 799 pieksels wyd is. As die kykpoort kleiner as 400 pixels is, is die agtergrondkleur ligblou:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Voorbeeld
Skep 'n responsiewe navigasiekieslys (horisontaal op groot skerms en vertikaal op klein skerms vertoon):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Voorbeeld
Gebruik medianavrae om 'n responsiewe kolomuitleg te skep:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Voorbeeld
Gebruik medianavrae om 'n responsiewe webwerf te skep:
Voorbeeld
Medianavrae kan ook gebruik word om die uitleg van 'n bladsy te verander na gelang van die oriëntasie van die blaaier. Jy kan 'n stel CSS-eienskappe hê wat slegs van toepassing sal wees wanneer die blaaiervenster wyer is as sy hoogte, 'n sogenaamde "Landskap"-oriëntasie.
Gebruik 'n ligblou agtergrondkleur as die oriëntasie in landskapmodus is:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Voorbeeld
Gebruik medianavrae om die tekskleur op groen te stel wanneer die dokument op die skerm vertoon word, en na swart wanneer dit gedruk word:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Voorbeeld
Komma-geskeide lys : voeg 'n bykomende medianavraag by 'n reeds bestaande een, met behulp van 'n komma (dit sal soos 'n OF-operateur optree):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <div> */
@media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Verwante bladsye
CSS-tutoriaal: CSS-medianavrae
CSS Tutoriaal: CSS Media Navrae Voorbeelde
RWD-tutoriaal: Responsiewe webontwerp met medianavrae
JavaScript Tutoriaal: Die window.matchMedia() metode