Vad ä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?
- Utvecklingsteamet definierar hur varje element ska se ut beroende på skärmstorlek;
- Nödvändiga instruktioner anges i koden;
- Webbläsaren övervakar förändringar i viewporten;
- 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 */
}
<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.
<media_feature>
– anger enhetens egenskaper. Vanligaste användning:min-width:
– minsta bredd på visningsytan;max-width:
– största bredd på visningsytan.
<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.
Tack för dina kommentarer!
Fråga AI
Fråga AI
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
Vad ä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?
- Utvecklingsteamet definierar hur varje element ska se ut beroende på skärmstorlek;
- Nödvändiga instruktioner anges i koden;
- Webbläsaren övervakar förändringar i viewporten;
- 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 */
}
<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.
<media_feature>
– anger enhetens egenskaper. Vanligaste användning:min-width:
– minsta bredd på visningsytan;max-width:
– största bredd på visningsytan.
<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.
Tack för dina kommentarer!