Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Vad är responsiv webbdesign? | Responsiv Webbdesign i CSS
Avancerade CSS-tekniker

bookVad är responsiv webbdesign?

Modern webbdesign är otänkbar utan adaptiva/responsiva designer. Det möjliggör att användare kan använda webbresurser lika bra på alla enheter: smartphone, surfplatta, stationär dator eller TV.

Hur fungerar det?

  1. Utvecklingsteamet definierar hur varje element ska se ut beroende på skärmstorlek;
  2. Nödvändiga instruktioner anges i koden;
  3. Webbläsaren övervakar förändringar i viewporten;
  4. Webbläsaren tillämpar de regler som utvecklingsteamet har angett i koden.

Media queries

Media query möjliggör adaptiva/responsiva designer. Med hjälp av dessa frågor kan utvecklare ange stilar för valfritt element beroende på skärmstorlek.

Observera

Media query kan uppfattas som instruktioner: "Om användarens skärm är en stationär dator, tillämpa dessa stilar på elementet. Om användarens skärm är en smartphone, tillämpa andra stilar på elementet. Och så vidare.".

Den grundläggande syntaxen för media query är följande:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – anger enhetstypen. Möjliga värden:
    • all – standardvärde. Om inget anges gäller regeln för alla enheter;
    • print – regeln gäller för enheter som producerar utskrifter, till exempel skrivare;
    • screen – regeln gäller för alla enheter med fysisk skärm.
  2. <media_feature> – anger enhetens egenskaper. Vanligaste användning:
    • min-width: – minsta bredd på visningsytan;
    • max-width: – största bredd på visningsytan.
  3. <operator> – media-typ och media-funktion separeras av en valfri logisk operator. Möjliga värden: and eller ,.

Observera

I följande kapitel kommer vi att behandla användningen av media queries i praktiken.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 1

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 2.04

bookVad är responsiv webbdesign?

Svep för att visa menyn

Modern webbdesign är otänkbar utan adaptiva/responsiva designer. Det möjliggör att användare kan använda webbresurser lika bra på alla enheter: smartphone, surfplatta, stationär dator eller TV.

Hur fungerar det?

  1. Utvecklingsteamet definierar hur varje element ska se ut beroende på skärmstorlek;
  2. Nödvändiga instruktioner anges i koden;
  3. Webbläsaren övervakar förändringar i viewporten;
  4. Webbläsaren tillämpar de regler som utvecklingsteamet har angett i koden.

Media queries

Media query möjliggör adaptiva/responsiva designer. Med hjälp av dessa frågor kan utvecklare ange stilar för valfritt element beroende på skärmstorlek.

Observera

Media query kan uppfattas som instruktioner: "Om användarens skärm är en stationär dator, tillämpa dessa stilar på elementet. Om användarens skärm är en smartphone, tillämpa andra stilar på elementet. Och så vidare.".

Den grundläggande syntaxen för media query är följande:

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}
  1. <media_type> – anger enhetstypen. Möjliga värden:
    • all – standardvärde. Om inget anges gäller regeln för alla enheter;
    • print – regeln gäller för enheter som producerar utskrifter, till exempel skrivare;
    • screen – regeln gäller för alla enheter med fysisk skärm.
  2. <media_feature> – anger enhetens egenskaper. Vanligaste användning:
    • min-width: – minsta bredd på visningsytan;
    • max-width: – största bredd på visningsytan.
  3. <operator> – media-typ och media-funktion separeras av en valfri logisk operator. Möjliga värden: and eller ,.

Observera

I följande kapitel kommer vi att behandla användningen av media queries i praktiken.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 1
some-alt