Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Hva er responsivt webdesign? | Responsivt Webdesign i CSS
Avanserte CSS-teknikker

bookHva er responsivt webdesign?

Det er umulig å forestille seg moderne webutvikling uten adaptive/responsive design. Dette gjør det mulig for brukere å benytte nettsider like godt på alle enheter: smarttelefon, nettbrett, stasjonær PC eller TV.

Hvordan fungerer det?

  1. Utviklingsteamet definerer hvordan hvert element skal se ut avhengig av skjermstørrelse;
  2. Nødvendige instruksjoner legges inn i koden;
  3. Nettleseren overvåker endringer i visningsområdet;
  4. Nettleseren anvender reglene som utviklingsteamet har lagt inn i koden.

Media-queries

Media-query muliggjør adaptive/responsive design. Ved hjelp av disse spørringene kan utviklere angi stilregler for ethvert element avhengig av skjermstørrelse.

Merk

Media-query kan oppfattes som instruksjoner: "Hvis brukerskjermen er en stasjonær datamaskin, bruk disse stilene på elementet. Hvis brukerskjermen er en smarttelefon, bruk andre stiler på elementet. Og så videre.".

Den grunnleggende syntaksen for media-query er som følger:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – angir enhetstype. Mulige verdier:
    • all – standardverdi. Hvis ingenting er spesifisert, gjelder media-regelen for alle enheter;
    • print – media-regelen gjelder for enheter som produserer utskrifter, som skrivere;
    • screen – media-regelen gjelder for alle enheter med fysisk skjerm.
  2. <media_feature> – angir enhetsegenskaper. Vanlig bruk:
    • min-width: – minimum bredde på visningsområdet;
    • max-width: – maksimum bredde på visningsområdet.
  3. <operator> – media-type og media-feature skilles med en valgfri logisk operator. Verdier kan være: and eller ,.

Merk

I de følgende kapitlene vil vi se på bruk av media-queries i praksis.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 1

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you give an example of a media-query in CSS?

What are some common use cases for media-queries?

How do I choose between adaptive and responsive design?

Awesome!

Completion rate improved to 2.04

bookHva er responsivt webdesign?

Sveip for å vise menyen

Det er umulig å forestille seg moderne webutvikling uten adaptive/responsive design. Dette gjør det mulig for brukere å benytte nettsider like godt på alle enheter: smarttelefon, nettbrett, stasjonær PC eller TV.

Hvordan fungerer det?

  1. Utviklingsteamet definerer hvordan hvert element skal se ut avhengig av skjermstørrelse;
  2. Nødvendige instruksjoner legges inn i koden;
  3. Nettleseren overvåker endringer i visningsområdet;
  4. Nettleseren anvender reglene som utviklingsteamet har lagt inn i koden.

Media-queries

Media-query muliggjør adaptive/responsive design. Ved hjelp av disse spørringene kan utviklere angi stilregler for ethvert element avhengig av skjermstørrelse.

Merk

Media-query kan oppfattes som instruksjoner: "Hvis brukerskjermen er en stasjonær datamaskin, bruk disse stilene på elementet. Hvis brukerskjermen er en smarttelefon, bruk andre stiler på elementet. Og så videre.".

Den grunnleggende syntaksen for media-query er som følger:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – angir enhetstype. Mulige verdier:
    • all – standardverdi. Hvis ingenting er spesifisert, gjelder media-regelen for alle enheter;
    • print – media-regelen gjelder for enheter som produserer utskrifter, som skrivere;
    • screen – media-regelen gjelder for alle enheter med fysisk skjerm.
  2. <media_feature> – angir enhetsegenskaper. Vanlig bruk:
    • min-width: – minimum bredde på visningsområdet;
    • max-width: – maksimum bredde på visningsområdet.
  3. <operator> – media-type og media-feature skilles med en valgfri logisk operator. Verdier kan være: and eller ,.

Merk

I de følgende kapitlene vil vi se på bruk av media-queries i praksis.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 6. Kapittel 1
some-alt