Introduktion till responsiv design - Webflow hjälp
Lär dig hur omflyttning av innehåll, fast storlek, relativ storlek och brytpunkter (media queries) hjälper till att skapa responsiva designer.
När du besöker en webbplats på din mobila enhet kan du se en skrivbordsversion av webbplatsen hoptryckt på en mindre skärm—vilket tvingar dig att zooma och panorera för att se något innehåll. Du kan också hamna på en urvattnad mobilversion som saknar det innehåll och den upplevelse som gör skrivbordsversionen överlägsen. Förhoppningsvis ser du dock en responsiv webbplats—en design som omflyttar och ompositionerar innehåll baserat på webbläsarens bredd.
Det finns tre olika aspekter av responsiv design som vi kommer att täcka här:
- Omflyttning av innehåll
- Fast storlek
- Relativ storlek
- Brytpunkter (media queries)
Omflyttning av innehåll
Omflyttning av innehåll avser innehåll som justerar sin bredd baserat på webbläsarens vyportsbredd. Till exempel kommer ett stycke med standardinställningar automatiskt att bryta sitt innehåll när webbläsarens bredd blir mindre. Detta beteende kan emuleras genom att dra i kanten av Designer-duk.
Fast storlek
Relativ storlek
Detta avser att ställa in en elements storlek relativt till andra saker som webbläsarens bredd eller ett överordnat element. Till exempel, istället för att använda en pixelbaserad storlek för en bild, överväg att använda olika enheter som %, VW (vyportsbredd) eller VH (vyportshöjd). Om du använder % på en bild och justerar webbläsarens bredd kan du se att den anpassar sig därefter medan en px-baserad bild inte gör det.
Brytpunkter
Layouter är vanligtvis mycket mer komplexa än att hantera en bilds bredd. Att använda brytpunkter (även kända som mediefrågor) gör det möjligt att inte bara testa omflödande innehåll, utan också att ändra design och layout baserat på olika enhetsbreddintervall.
Läs mer: