CSS -medianavrae
CSS2 het mediatipes bekendgestel
Die @mediareël, wat in CSS2 bekendgestel is, het dit moontlik gemaak om verskillende stylreëls vir verskillende mediatipes te definieer.
Voorbeelde: Jy kan een stel stylreëls vir rekenaarskerms hê, een vir drukkers, een vir handtoestelle, een vir televisietipe toestelle, ensovoorts.
Ongelukkig het hierdie mediatipes nooit baie ondersteuning deur toestelle gekry nie, behalwe die drukmediatipe.
CSS3 het medianavrae bekendgestel
Medianavrae in CSS3 het die idee van CSS2-mediatipes uitgebrei: In plaas daarvan om na 'n tipe toestel te soek, kyk hulle na die vermoë van die toestel.
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 aan tafelrekenaars, skootrekenaars, tablette en selfone (soos iPhone- en Android-fone) te lewer.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die @mediareël ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Medianavraagsintaksis
'n Medianavraag bestaan uit 'n mediatipe en kan een of meer uitdrukkings bevat wat na óf waar óf onwaar oplos.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Die resultaat van die navraag is waar as die gespesifiseerde mediatipe ooreenstem met die tipe toestel waarop die dokument vertoon word en alle uitdrukkings in die medianavraag is waar. Wanneer 'n medianavraag waar is, word die ooreenstemmende stylblad of stylreëls toegepas, volgens die normale kaskadereëls.
Tensy jy die nie of enigste operateurs gebruik nie, is die mediatipe opsioneel en die
alltipe sal geïmpliseer word.
Jy kan ook verskillende stylblaaie vir verskillende media hê:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3-mediatipes
| Value | Description |
|---|---|
| all | 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 |
Medianavrae Eenvoudige voorbeelde
Een manier om medianavrae te gebruik, is om 'n alternatiewe CSS-afdeling reg binne jou stylblad te hê.
Die volgende voorbeeld verander die agtergrondkleur na liggroen as die uitsigpoort 480 pieksels wyd of wyer is (as die uitsigpoort minder as 480 pieksels is, sal die agtergrondkleur pienk wees):
Voorbeeld
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Die volgende voorbeeld wys 'n kieslys wat aan die linkerkant van die bladsy sal sweef as die kykpoort 480 pieksels wyd of wyer is (as die kykpoort minder as 480 pieksels is, sal die spyskaart bo-op die inhoud wees):
Voorbeeld
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Meer voorbeelde van medianavrae
Vir baie meer voorbeelde oor medianavrae, gaan na die volgende bladsy: CSS MQ Voorbeelde .
CSS @media Verwysing
Vir 'n volledige oorsig van al die mediatipes en kenmerke/uitdrukkings, kyk asseblief na die @media-reël in ons CSS-verwysing .