for at implementere responsivt internetdesign er det vigtigt at forstå medieforespørgsler i CSS, især kun medier og medieskærmforespørgsler.

lad os begynde med det indlysende spørgsmål.

hvad er en medieforespørgsel?

en medieforespørgsel er en teknik, der blev introduceret i CSS3. Forespørgslen indebærer at bruge @media-reglen til at køre en blok af CSS-egenskaber, hvis en forudbestemt betingelse er sand.

for eksempel dikterer koden nedenfor, at hvis bro.ser-vinduet er 400ph eller mindre, vil baggrundsfarven være lysegrøn:

@media only screen og (maks. bredde: 400ph) {
krop {
baggrundsfarve: lightgreen;
}
}

medieforespørgsler er især nyttige med at tilføje breakpoints til responsivt design. Da breakpoints i det væsentlige er billednumre, hvor indhold eller design vises anderledes end brugerne, bruges medieforespørgsler til at definere, hvilke ændringer der skal ske ved hvilke billedpunkter.

i eksemplet nedenfor bestemmer koden, at hvis bro.ser-vinduet reduceres til under 600 gange, skal hver kolonnebredde blive 100%:

/* til desktop: * /
.col – 1 {bredde: 8,33%;}
.col – 2 {bredde: 16,66%;}
.col – 3 {bredde: 25%;}
.col – 4 {bredde: 33,33%;}
.col-5 {bredde: 41,66%;}
.col-6 {bredde: 50%;}
.col-7 {bredde: 58,33%;}
.col-8 {bredde: 66,66%;}
.col-9 {bredde: 75%;}
.col – 10 {bredde: 83,33%;}
.col – 11 {bredde: 91,66%;}
.col – 12 {Bredde: 100%;}

@media only screen and (maks. bredde: 600ph) {
/* til mobiltelefoner: * /
{
Bredde: 100%;
}
}

hver medieforespørgsel består af en valgfri medietype og et eller flere mediefunktionsudtryk. Det er muligt at kombinere flere medieforespørgsler med logiske operatører. Alle medieforespørgsler er store og små bogstaver.

hver medieforespørgsel betragtes som sand, når den angivne medietype matcher de enheder, som hjemmesiden vises på. Derudover skal mediefunktionen udtryk også være sandt.

Hvad er medieskærmforespørgslen?

@media screen-forespørgslen betyder simpelthen, at den pågældende forespørgsel er beregnet til farveskærme eller enheder, der understøtter en “skærm” – tilstand.

lad os tage et eksempel:

@media screen og (maks.bredde:500ph)

ovenstående forespørgsel gælder for skærme med en maksimal bredde på 500 billedpunkter. Pointen med dette er hovedsageligt at dirigere koden til at skelne mellem ‘skærm’ og andre medietyper (såsom udskrivning, blindeskrift, præget, håndholdt osv.).

Hvad er den eneste medieforespørgsel?

Ved at tilføje den logiske operator ‘kun’ til medieforespørgslen sikrer udvikleren, at forespørgslen kun anvendes, hvis hele betingelsen matcher. Hvis du ikke kun bruger, kan ældre brugere muligvis ikke læse eller fortolke alle mediefunktionens udtryk. Hvis forespørgslen f.eks. er

@media screen og (maks. bredde:500 gange)

ældre brugere kan fortolke forespørgslen som bare skærm og ignorere antallet af billedpunkter. Dette ville føre til anvendelse af forespørgselsbetingelsen på alle skærme. For at forhindre dette kan du bruge:

@media only screen and (maks. bredde:500ph)

Når du bruger den eneste operatør, skal du sørge for at angive medietypen.

betydning i responsivt design

medieforespørgsler er medvirkende til implementering af responsivt internetdesign. Forespørgslerne diskuteret ovenfor er to af de mest almindeligt anvendte dem og er nyttige i at sikre, at din hjemmeside indhold er optimeret til enhed størrelser og typer.

når du har brugt CSS forespørgsler på din hjemmeside, skal du sørge for at kontrollere deres effektivitet. Den nemmeste måde at gøre dette på er at bruge et værktøj, der giver dig mulighed for at teste dit hjemmesidedesign på rigtige enheder. Der er flere værktøjer til at lette dette, men tag dig tid til at finde en lydhør checker online, som giver dig mulighed for at teste på en tilstrækkelig bred vifte af enheder — både desktop og mobil.