Responsiewe Webontwerp - Medianavrae
Wat is 'n medianavraag?
Medianavraag is 'n CSS-tegniek wat in CSS3 bekendgestel is.
Dit gebruik die @mediareël om slegs 'n blok CSS-eienskappe in te sluit as 'n sekere voorwaarde waar is.
Voorbeeld
As die blaaiervenster 600px of kleiner is, sal die agtergrondkleur ligblou wees:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Voeg 'n breekpunt by
Ons het vroeër in hierdie tutoriaal 'n webblad met rye en kolomme gemaak, en dit was reageer, maar dit het nie goed gelyk op 'n klein skerm nie.
Medianavrae kan daarmee help. Ons kan 'n breekpunt byvoeg waar sekere dele van die ontwerp anders sal optree aan elke kant van die breekpunt.
Desktop
Foon
Gebruik 'n medianavraag om 'n breekpunt by 768px by te voeg:
Voorbeeld
Wanneer die skerm (blaaiervenster) kleiner as 768px word, moet elke kolom 'n breedte van 100% hê:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Ontwerp altyd eers vir selfoon
Mobile First beteken ontwerp vir selfoon voor ontwerp vir rekenaars of enige ander toestel (Dit sal die bladsy vinniger op kleiner toestelle laat vertoon).
Dit beteken dat ons 'n paar veranderinge in ons CSS moet maak.
In plaas daarvan om style te verander wanneer die breedte kleiner as 768px word, moet ons die ontwerp verander wanneer die breedte groter as 768px word. Dit sal ons ontwerp Mobile First maak:
Voorbeeld
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Nog 'n breekpunt
Jy kan soveel breekpunte byvoeg as wat jy wil.
Ons sal ook 'n breekpunt tussen tablette en selfone invoeg.
Desktop
Tablet
Foon
Ons doen dit deur nog een medianavraag by te voeg (teen 600px), en 'n stel nuwe klasse vir toestelle groter as 600px (maar kleiner as 768px):
Voorbeeld
Let daarop dat die twee stelle klasse amper identies is, die enigste verskil is die naam ( col-en col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Dit mag dalk vreemd lyk dat ons twee stelle identiese klasse het, maar dit gee ons die geleentheid in HTML om te besluit wat met die kolomme by elke breekpunt sal gebeur:
HTML voorbeeld
Vir lessenaar:
Die eerste en die derde afdeling sal albei oor 3 kolomme elk strek. Die middelste gedeelte sal oor 6 kolomme strek.
Vir tablette:
Die eerste afdeling sal oor 3 kolomme strek, die tweede sal oor 9 strek, en die derde afdeling sal onder die eerste twee afdelings vertoon word, en dit sal oor 12 kolomme strek:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
Tipiese toestelbreekpunte
Daar is tonne skerms en toestelle met verskillende hoogtes en breedtes, so dit is moeilik om 'n presiese breekpunt vir elke toestel te skep. Om dinge eenvoudig te hou, kan jy vyf groepe teiken:
Voorbeeld
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Oriëntasie: Portret / Landskap
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 as sy hoogte is, 'n sogenaamde "Landskap"-oriëntasie:
Voorbeeld
Die webblad sal 'n ligblou agtergrond hê as die oriëntasie in landskapmodus is:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Versteek elemente met medianavrae
Nog 'n algemene gebruik van medianavrae is om elemente op verskillende skermgroottes te versteek:
Voorbeeld
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Verander lettergrootte met medianavrae
Jy kan ook medianavrae gebruik om die lettergrootte van 'n element op verskillende skermgroottes te verander:
Veranderlike lettergrootte.
Voorbeeld
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
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 .