Responsiv utforming

Responsiv utforming tilpasser sidens oppsett og utseende til størrelsen på den besøkendes nettleservindu. I Datavju bruker du ett komponenttre og legger responsive tilstander til Styles av typen CSS Class. Bruk dem når et produktgitter, en meny, en overskrift eller et skjema trenger ulik avstand eller plassering på mobil, nettbrett og større skjermer.

Slik fungerer responsive Styles

Legg det vanlige oppsettet i Default State. Legg til en Media-tilstand for innstillingene som skal endres ved en bestemt bredde eller høyde. Teksten og de tilkoblede Table-radene hører til samme Page ved alle størrelser.

Bruk et navngitt bruddpunkt i Design System når hele nettstedet skal bruke samme breddegrense. Bruk en lokal Media-tilstand når siden ikke har et valgt Design System. Betingede States på vanlige komponenter kan også reagere på Media Property-verdier, som retning, når du vil endre innhold eller attributter i tillegg til CSS.

Lag et responsivt oppsett

Legg det vanlige oppsettet i Default State. Legg deretter til en størrelsesbetingelse for verdiene som skal endres.

1. Velg Styles i sidens venstre verktøylinje. Åpne menyen på roten av Styles-treet og velg Add Style.
2. Gi stilen navnet Responsive grid og sett Style Type til CSS Class.
3. I Default State legger du til Display med grid, Grid Template Columns med repeat(2, minmax(0, 1fr)) og Gap med 24px.
4. Velg Add States og åpne menyen med tre prikker ved States.
5. Uten et Design System velger du Media. Velg My Media State, deretter Add Feature Expression og Max Width. Lukk Media Features-panelet og skriv 600px i Max Width.
6. Med denne Media-tilstanden valgt legger du til Grid Template Columns med minmax(0, 1fr). Behold verdier som skal være like, i Default State.
7. Velg Product grid-elementet under Components. Bruk plusstegnet ved Properties, åpne Styles-kategorien og legg til Responsive grid. Fjern en direkte Grid Template Columns-verdi på elementet hvis den overstyrer den delte CSS Class-stilen.
8. Velg Custom Size i menyen for visningsstørrelse. Sett Page width til 620 og deretter 390. Gitteret skal gå fra to kolonner til én. Kontroller begge kortene og teksten deres.

Bruk et navngitt bruddpunkt fra Design System

Bruk et navngitt bruddpunkt når flere Styles skal dele samme minste bredde.

Velgeren starter på Choose breakpoint. Velg et bruddpunkt for å aktivere Add breakpoint state. Når du velger et Design System, bruker menyen de delte bruddpunktene derfra. Endre bredden i Definitions når alle elementer som bruker bruddpunktet, skal følge endringen. Publiser deretter de berørte sidene på nytt.

1. Godkjenn bruddpunktet i Design System under Definitions, inkludert minste bredde.
2. Velg dette Design System under General for nettstedet. Gjenbrukbare Components velger sitt eget Component Design System i komponentinnstillingene.
3. Åpne en Style av typen CSS Class, velg Add States ved behov og åpne States-menyen.
4. Velg bruddpunktet under Style named breakpoint, og velg deretter Add breakpoint state.
5. Velg den nye tilstanden og legg til CSS-innstillingene for denne minste bredden. Query-området viser hvilket navngitt bruddpunkt den bruker. Endre bruddpunktets bredde i Definitions.
6. Kontroller størrelser under, på og over denne bredden. Publiser det berørte resultatet på nytt når kildeendringene er godkjent.

Innstillinger for lokale mediespørringer

En ny Media-tilstand heter My Media State og har ingen mediebetingelser. Gi den et beskrivende navn, som Narrow catalog. Verdiene nedenfor gir ingen størrelsesbetingelse før du legger dem til og fyller dem ut. Bruk CSS-enheter for lengder, som 600px eller 40rem.

Flere Media-tilstander kan gjelde samtidig. Enkle regler for minste bredde i piksler som står etter hverandre, brukes fra mindre til større bredder. Regler for største bredde brukes fra større til mindre, slik at den snevreste størrelsesgrensen kommer sist. Navngitte bruddpunkter for minste bredde følger samme rekkefølge. Sammensatte spørringer, blandede spørringstyper og andre enheter beholder plasseringen fra da du la dem til. Vanlig CSS-prioritering gjelder fortsatt. Bruk ett tydelig grunnoppsett med bevisste overstyringer, og unngå overlappende regler som motarbeider hverandre.

• Width: Gjelder ved nøyaktig angitt bredde på visningsområdet. Bruk den bare når du trenger en eksakt bredde. 600px gjelder ikke også ved 601px.
• Min Width: Gjelder ved denne bredden og større bredder. Bruk 800px for å innføre et bredere oppsett fra denne grensen og oppover.
• Max Width: Gjelder ved denne bredden og mindre bredder. Bruk 600px for å plassere kort under hverandre i et smalt visningsområde.
• Height: Gjelder ved nøyaktig angitt høyde på visningsområdet. Et intervall er som regel mer nyttig når nettleserens egne kontroller endrer den tilgjengelige høyden.
• Min Height: Gjelder ved denne høyden og større høyder. Bruk 700px når ekstra plass i høyden skal gi et romsligere oppsett.
• Max Height: Gjelder ved denne høyden og mindre høyder. Bruk 500px for å redusere dekorative avstander i et lavt, liggende visningsområde.
• Orientation: Tilbyr Landscape og Portrait. Bruk den når oppsettet avhenger av formen på visningsområdet. Den identifiserer ikke en bestemt enhet og krever ingen fysisk rotasjonssensor.
• Add Feature Expression: Legger til en betingelse i denne spørringen. Alle betingelser i samme Media-tilstand må være oppfylt. Min Width 600px sammen med Max Width 900px gir et breddeintervall som inkluderer begge grensene.
• Delete feature / Delete media state: Papirkurvkontrollene fjerner uttrykket eller hele den valgte Media-tilstanden. Fjern en foreldet regel i stedet for å la et uferdig uttrykk stå igjen.

Visningsstørrelser i redigeringsverktøyet

Menyen for visningsstørrelse starter på Laptop 1280x800. Velg en størrelse for å kontrollere oppsettet i redigeringsverktøyet. Besøkende ser siden med bredden og høyden til sin egen nettleser.

Åpne Preview for å kontrollere siden uten redigeringsverktøyets markeringskontroller. Endre også størrelsen på selve Preview-vinduet. En stor arbeidsflate kan strekke seg utover plassen mellom redigeringspanelene. Denne avkuttingen er noe annet enn innhold som går utenfor selve siden.

• Custom Size: Viser Page width og Page height. Hvis du ikke har skrevet egne mål, starter de på 1280 og 800. Skriv størrelser i CSS-piksler for å kontrollere et bestemt bruddpunkt, som 601 og 600 på hver sin side av en breddegrense.
• iPhone 14 Portrait: 390 × 844. Bruk den for å kontrollere et smalt og høyt oppsett.
• iPhone 14 Landscape: 844 × 390. Bruk den for å kontrollere bredt, men lavt innhold og skjemaer.
• iPad Portrait: 768 × 1024. Bruk den for et mellomstort og høyt visningsområde.
• iPad Landscape: 1024 × 768. Bruk den for et mellomstort og bredt visningsområde.
• Laptop 1280x800: 1280 × 800 og den valgte størrelsen fra start. Bruk den for det vanlige oppsettet på en datamaskin.
• Desktop 1440x900: 1440 × 900. Bruk den for å kontrollere bredere tekstlinjer og gitter.
• Desktop 1920x1080: 1920 × 1080. Bruk den for å kontrollere største bredder og overflødig tomrom på en stor skjerm.

Eksempler

Bredderegler endrer gitteret og størrelsen på overskriften. Høyde og retning kan kombineres for lave skjermer.

Eksempel: et produktgitter

Eksempelkatalogen inneholder Desk lamp til €40.00 og Pendant lamp til €75.00. Responsive grid har to like brede kolonner i Default State og én kolonne ved Max Width 600px. Ved 620px står kortene ved siden av hverandre. Ved 390px flyttes Pendant lamp under Desk lamp. Begge prisene og antallet produktposter er uendret.

Eksempel: lesbare overskrifter

Lag en overskriftsstil med Font Size 24px og Line Height 1.2 i Default State. Legg til en Media-tilstand med Min Width 800px og Font Size 40px. Legg stilen på Heading-elementet, ikke på Plain Text-elementet under det. Den samme overskriften bruker større skrift i brede visningsområder og mindre skrift under 800px, med én felles tekst.

Eksempel: et lavt, liggende visningsområde

Gi en toppseksjon Padding 48px 24px i Default State. Legg til en Media-tilstand med Orientation Landscape og Max Height 500px. Sett deretter Padding til 20px 24px i denne tilstanden. Begge betingelsene må være oppfylt: Et høyt nettleservindu beholder grunnavstanden, mens et lavt, liggende vindu bruker mindre plass i høyden. Kontroller at menyen og knappen fortsatt får plass og er tilgjengelige.

Begrensninger og vanlige feil

Velg CSS Class når du trenger menyen for Media-tilstander i en Style. Konfigurer Hover og Focus hver for seg, adskilt fra Media. Kontrollene tilbyr disse tilstandene separat. Kontroller utformingen ved hver bredde og under hver samhandling du bruker.

Bruk enheter for CSS-lengder, og kontroller spørringens faktiske visningsområde. Nettleserens zoomnivå, enhetens fysiske skjermoppløsning og bredden i CSS-piksler er ulike mål. Kontroller lang tekst, tastaturfokus, menyer, inndatafelt og innhold som går utenfor kanten, i tillegg til det første skjermbildet.

Sett Dataset-tilgang separat for private data, også innhold du skjuler på små skjermer. Bruk Datavju-redigeringsverktøyet på en datamaskin med minst 1280 × 720 CSS-piksler. Kontroller også hvordan siden vises for besøkende på mobil.

Vent til lagringen er ferdig, og åpne siden på nytt for å kontrollere innstillingene. Publiser på nytt for å vise den oppdaterte utformingen på en eksisterende offentlig side.

Relaterte artikler

Bruk Styles for CSS Class og Design System for delte, navngitte bruddpunkter.

• Styles: Lag og legg til CSS Class-stilen som inneholder de responsive innstillingene.
• Design System: Del designtokener og navngitte bruddpunkter for minste bredde.
• States: Endre komponentverdier når betingelser for variabler, data eller visningsområde er oppfylt.
• Story: Bygg og kontroller komponenttreet.
• Page: Konfigurer sidens data, navigasjon og resultat.

Responsiv utforming

Responsiv utforming tilpasser sidens oppsett og utseende til størrelsen på den besøkendes nettleservindu. I Datavju bruker du ett komponenttre og legger responsive tilstander til Styles av typen CSS Class. Bruk dem når et produktgitter, en meny, en overskrift eller et skjema trenger ulik avstand eller plassering på mobil, nettbrett og større skjermer.

Slik fungerer responsive Styles

Legg det vanlige oppsettet i Default State. Legg til en Media-tilstand for innstillingene som skal endres ved en bestemt bredde eller høyde. Teksten og de tilkoblede Table-radene hører til samme Page ved alle størrelser.

Bruk et navngitt bruddpunkt i Design System når hele nettstedet skal bruke samme breddegrense. Bruk en lokal Media-tilstand når siden ikke har et valgt Design System. Betingede States på vanlige komponenter kan også reagere på Media Property-verdier, som retning, når du vil endre innhold eller attributter i tillegg til CSS.

Lag et responsivt oppsett

Legg det vanlige oppsettet i Default State. Legg deretter til en størrelsesbetingelse for verdiene som skal endres.

1. Velg Styles i sidens venstre verktøylinje. Åpne menyen på roten av Styles-treet og velg Add Style.
2. Gi stilen navnet Responsive grid og sett Style Type til CSS Class.
3. I Default State legger du til Display med grid, Grid Template Columns med repeat(2, minmax(0, 1fr)) og Gap med 24px.
4. Velg Add States og åpne menyen med tre prikker ved States.
5. Uten et Design System velger du Media. Velg My Media State, deretter Add Feature Expression og Max Width. Lukk Media Features-panelet og skriv 600px i Max Width.
6. Med denne Media-tilstanden valgt legger du til Grid Template Columns med minmax(0, 1fr). Behold verdier som skal være like, i Default State.
7. Velg Product grid-elementet under Components. Bruk plusstegnet ved Properties, åpne Styles-kategorien og legg til Responsive grid. Fjern en direkte Grid Template Columns-verdi på elementet hvis den overstyrer den delte CSS Class-stilen.
8. Velg Custom Size i menyen for visningsstørrelse. Sett Page width til 620 og deretter 390. Gitteret skal gå fra to kolonner til én. Kontroller begge kortene og teksten deres.

Bruk et navngitt bruddpunkt fra Design System

Bruk et navngitt bruddpunkt når flere Styles skal dele samme minste bredde.

Velgeren starter på Choose breakpoint. Velg et bruddpunkt for å aktivere Add breakpoint state. Når du velger et Design System, bruker menyen de delte bruddpunktene derfra. Endre bredden i Definitions når alle elementer som bruker bruddpunktet, skal følge endringen. Publiser deretter de berørte sidene på nytt.

1. Godkjenn bruddpunktet i Design System under Definitions, inkludert minste bredde.
2. Velg dette Design System under General for nettstedet. Gjenbrukbare Components velger sitt eget Component Design System i komponentinnstillingene.
3. Åpne en Style av typen CSS Class, velg Add States ved behov og åpne States-menyen.
4. Velg bruddpunktet under Style named breakpoint, og velg deretter Add breakpoint state.
5. Velg den nye tilstanden og legg til CSS-innstillingene for denne minste bredden. Query-området viser hvilket navngitt bruddpunkt den bruker. Endre bruddpunktets bredde i Definitions.
6. Kontroller størrelser under, på og over denne bredden. Publiser det berørte resultatet på nytt når kildeendringene er godkjent.

Innstillinger for lokale mediespørringer

En ny Media-tilstand heter My Media State og har ingen mediebetingelser. Gi den et beskrivende navn, som Narrow catalog. Verdiene nedenfor gir ingen størrelsesbetingelse før du legger dem til og fyller dem ut. Bruk CSS-enheter for lengder, som 600px eller 40rem.

Flere Media-tilstander kan gjelde samtidig. Enkle regler for minste bredde i piksler som står etter hverandre, brukes fra mindre til større bredder. Regler for største bredde brukes fra større til mindre, slik at den snevreste størrelsesgrensen kommer sist. Navngitte bruddpunkter for minste bredde følger samme rekkefølge. Sammensatte spørringer, blandede spørringstyper og andre enheter beholder plasseringen fra da du la dem til. Vanlig CSS-prioritering gjelder fortsatt. Bruk ett tydelig grunnoppsett med bevisste overstyringer, og unngå overlappende regler som motarbeider hverandre.

• Width: Gjelder ved nøyaktig angitt bredde på visningsområdet. Bruk den bare når du trenger en eksakt bredde. 600px gjelder ikke også ved 601px.
• Min Width: Gjelder ved denne bredden og større bredder. Bruk 800px for å innføre et bredere oppsett fra denne grensen og oppover.
• Max Width: Gjelder ved denne bredden og mindre bredder. Bruk 600px for å plassere kort under hverandre i et smalt visningsområde.
• Height: Gjelder ved nøyaktig angitt høyde på visningsområdet. Et intervall er som regel mer nyttig når nettleserens egne kontroller endrer den tilgjengelige høyden.
• Min Height: Gjelder ved denne høyden og større høyder. Bruk 700px når ekstra plass i høyden skal gi et romsligere oppsett.
• Max Height: Gjelder ved denne høyden og mindre høyder. Bruk 500px for å redusere dekorative avstander i et lavt, liggende visningsområde.
• Orientation: Tilbyr Landscape og Portrait. Bruk den når oppsettet avhenger av formen på visningsområdet. Den identifiserer ikke en bestemt enhet og krever ingen fysisk rotasjonssensor.
• Add Feature Expression: Legger til en betingelse i denne spørringen. Alle betingelser i samme Media-tilstand må være oppfylt. Min Width 600px sammen med Max Width 900px gir et breddeintervall som inkluderer begge grensene.
• Delete feature / Delete media state: Papirkurvkontrollene fjerner uttrykket eller hele den valgte Media-tilstanden. Fjern en foreldet regel i stedet for å la et uferdig uttrykk stå igjen.

Visningsstørrelser i redigeringsverktøyet

Menyen for visningsstørrelse starter på Laptop 1280x800. Velg en størrelse for å kontrollere oppsettet i redigeringsverktøyet. Besøkende ser siden med bredden og høyden til sin egen nettleser.

Åpne Preview for å kontrollere siden uten redigeringsverktøyets markeringskontroller. Endre også størrelsen på selve Preview-vinduet. En stor arbeidsflate kan strekke seg utover plassen mellom redigeringspanelene. Denne avkuttingen er noe annet enn innhold som går utenfor selve siden.

• Custom Size: Viser Page width og Page height. Hvis du ikke har skrevet egne mål, starter de på 1280 og 800. Skriv størrelser i CSS-piksler for å kontrollere et bestemt bruddpunkt, som 601 og 600 på hver sin side av en breddegrense.
• iPhone 14 Portrait: 390 × 844. Bruk den for å kontrollere et smalt og høyt oppsett.
• iPhone 14 Landscape: 844 × 390. Bruk den for å kontrollere bredt, men lavt innhold og skjemaer.
• iPad Portrait: 768 × 1024. Bruk den for et mellomstort og høyt visningsområde.
• iPad Landscape: 1024 × 768. Bruk den for et mellomstort og bredt visningsområde.
• Laptop 1280x800: 1280 × 800 og den valgte størrelsen fra start. Bruk den for det vanlige oppsettet på en datamaskin.
• Desktop 1440x900: 1440 × 900. Bruk den for å kontrollere bredere tekstlinjer og gitter.
• Desktop 1920x1080: 1920 × 1080. Bruk den for å kontrollere største bredder og overflødig tomrom på en stor skjerm.

Eksempler

Bredderegler endrer gitteret og størrelsen på overskriften. Høyde og retning kan kombineres for lave skjermer.

Eksempel: et produktgitter

Eksempelkatalogen inneholder Desk lamp til €40.00 og Pendant lamp til €75.00. Responsive grid har to like brede kolonner i Default State og én kolonne ved Max Width 600px. Ved 620px står kortene ved siden av hverandre. Ved 390px flyttes Pendant lamp under Desk lamp. Begge prisene og antallet produktposter er uendret.

Eksempel: lesbare overskrifter

Lag en overskriftsstil med Font Size 24px og Line Height 1.2 i Default State. Legg til en Media-tilstand med Min Width 800px og Font Size 40px. Legg stilen på Heading-elementet, ikke på Plain Text-elementet under det. Den samme overskriften bruker større skrift i brede visningsområder og mindre skrift under 800px, med én felles tekst.

Eksempel: et lavt, liggende visningsområde

Gi en toppseksjon Padding 48px 24px i Default State. Legg til en Media-tilstand med Orientation Landscape og Max Height 500px. Sett deretter Padding til 20px 24px i denne tilstanden. Begge betingelsene må være oppfylt: Et høyt nettleservindu beholder grunnavstanden, mens et lavt, liggende vindu bruker mindre plass i høyden. Kontroller at menyen og knappen fortsatt får plass og er tilgjengelige.

Begrensninger og vanlige feil

Velg CSS Class når du trenger menyen for Media-tilstander i en Style. Konfigurer Hover og Focus hver for seg, adskilt fra Media. Kontrollene tilbyr disse tilstandene separat. Kontroller utformingen ved hver bredde og under hver samhandling du bruker.

Bruk enheter for CSS-lengder, og kontroller spørringens faktiske visningsområde. Nettleserens zoomnivå, enhetens fysiske skjermoppløsning og bredden i CSS-piksler er ulike mål. Kontroller lang tekst, tastaturfokus, menyer, inndatafelt og innhold som går utenfor kanten, i tillegg til det første skjermbildet.

Sett Dataset-tilgang separat for private data, også innhold du skjuler på små skjermer. Bruk Datavju-redigeringsverktøyet på en datamaskin med minst 1280 × 720 CSS-piksler. Kontroller også hvordan siden vises for besøkende på mobil.

Vent til lagringen er ferdig, og åpne siden på nytt for å kontrollere innstillingene. Publiser på nytt for å vise den oppdaterte utformingen på en eksisterende offentlig side.

Relaterte artikler

Bruk Styles for CSS Class og Design System for delte, navngitte bruddpunkter.

• Styles: Lag og legg til CSS Class-stilen som inneholder de responsive innstillingene.
• Design System: Del designtokener og navngitte bruddpunkter for minste bredde.
• States: Endre komponentverdier når betingelser for variabler, data eller visningsområde er oppfylt.
• Story: Bygg og kontroller komponenttreet.
• Page: Konfigurer sidens data, navigasjon og resultat.

Responsiv utforming

Responsiv utforming tilpasser sidens oppsett og utseende til størrelsen på den besøkendes nettleservindu. I Datavju bruker du ett komponenttre og legger responsive tilstander til Styles av typen CSS Class. Bruk dem når et produktgitter, en meny, en overskrift eller et skjema trenger ulik avstand eller plassering på mobil, nettbrett og større skjermer.

Slik fungerer responsive Styles

Legg det vanlige oppsettet i Default State. Legg til en Media-tilstand for innstillingene som skal endres ved en bestemt bredde eller høyde. Teksten og de tilkoblede Table-radene hører til samme Page ved alle størrelser.

Bruk et navngitt bruddpunkt i Design System når hele nettstedet skal bruke samme breddegrense. Bruk en lokal Media-tilstand når siden ikke har et valgt Design System. Betingede States på vanlige komponenter kan også reagere på Media Property-verdier, som retning, når du vil endre innhold eller attributter i tillegg til CSS.

Lag et responsivt oppsett

Legg det vanlige oppsettet i Default State. Legg deretter til en størrelsesbetingelse for verdiene som skal endres.

1. Velg Styles i sidens venstre verktøylinje. Åpne menyen på roten av Styles-treet og velg Add Style.
2. Gi stilen navnet Responsive grid og sett Style Type til CSS Class.
3. I Default State legger du til Display med grid, Grid Template Columns med repeat(2, minmax(0, 1fr)) og Gap med 24px.
4. Velg Add States og åpne menyen med tre prikker ved States.
5. Uten et Design System velger du Media. Velg My Media State, deretter Add Feature Expression og Max Width. Lukk Media Features-panelet og skriv 600px i Max Width.
6. Med denne Media-tilstanden valgt legger du til Grid Template Columns med minmax(0, 1fr). Behold verdier som skal være like, i Default State.
7. Velg Product grid-elementet under Components. Bruk plusstegnet ved Properties, åpne Styles-kategorien og legg til Responsive grid. Fjern en direkte Grid Template Columns-verdi på elementet hvis den overstyrer den delte CSS Class-stilen.
8. Velg Custom Size i menyen for visningsstørrelse. Sett Page width til 620 og deretter 390. Gitteret skal gå fra to kolonner til én. Kontroller begge kortene og teksten deres.

Bruk et navngitt bruddpunkt fra Design System

Bruk et navngitt bruddpunkt når flere Styles skal dele samme minste bredde.

Velgeren starter på Choose breakpoint. Velg et bruddpunkt for å aktivere Add breakpoint state. Når du velger et Design System, bruker menyen de delte bruddpunktene derfra. Endre bredden i Definitions når alle elementer som bruker bruddpunktet, skal følge endringen. Publiser deretter de berørte sidene på nytt.

1. Godkjenn bruddpunktet i Design System under Definitions, inkludert minste bredde.
2. Velg dette Design System under General for nettstedet. Gjenbrukbare Components velger sitt eget Component Design System i komponentinnstillingene.
3. Åpne en Style av typen CSS Class, velg Add States ved behov og åpne States-menyen.
4. Velg bruddpunktet under Style named breakpoint, og velg deretter Add breakpoint state.
5. Velg den nye tilstanden og legg til CSS-innstillingene for denne minste bredden. Query-området viser hvilket navngitt bruddpunkt den bruker. Endre bruddpunktets bredde i Definitions.
6. Kontroller størrelser under, på og over denne bredden. Publiser det berørte resultatet på nytt når kildeendringene er godkjent.

Innstillinger for lokale mediespørringer

En ny Media-tilstand heter My Media State og har ingen mediebetingelser. Gi den et beskrivende navn, som Narrow catalog. Verdiene nedenfor gir ingen størrelsesbetingelse før du legger dem til og fyller dem ut. Bruk CSS-enheter for lengder, som 600px eller 40rem.

Flere Media-tilstander kan gjelde samtidig. Enkle regler for minste bredde i piksler som står etter hverandre, brukes fra mindre til større bredder. Regler for største bredde brukes fra større til mindre, slik at den snevreste størrelsesgrensen kommer sist. Navngitte bruddpunkter for minste bredde følger samme rekkefølge. Sammensatte spørringer, blandede spørringstyper og andre enheter beholder plasseringen fra da du la dem til. Vanlig CSS-prioritering gjelder fortsatt. Bruk ett tydelig grunnoppsett med bevisste overstyringer, og unngå overlappende regler som motarbeider hverandre.

• Width: Gjelder ved nøyaktig angitt bredde på visningsområdet. Bruk den bare når du trenger en eksakt bredde. 600px gjelder ikke også ved 601px.
• Min Width: Gjelder ved denne bredden og større bredder. Bruk 800px for å innføre et bredere oppsett fra denne grensen og oppover.
• Max Width: Gjelder ved denne bredden og mindre bredder. Bruk 600px for å plassere kort under hverandre i et smalt visningsområde.
• Height: Gjelder ved nøyaktig angitt høyde på visningsområdet. Et intervall er som regel mer nyttig når nettleserens egne kontroller endrer den tilgjengelige høyden.
• Min Height: Gjelder ved denne høyden og større høyder. Bruk 700px når ekstra plass i høyden skal gi et romsligere oppsett.
• Max Height: Gjelder ved denne høyden og mindre høyder. Bruk 500px for å redusere dekorative avstander i et lavt, liggende visningsområde.
• Orientation: Tilbyr Landscape og Portrait. Bruk den når oppsettet avhenger av formen på visningsområdet. Den identifiserer ikke en bestemt enhet og krever ingen fysisk rotasjonssensor.
• Add Feature Expression: Legger til en betingelse i denne spørringen. Alle betingelser i samme Media-tilstand må være oppfylt. Min Width 600px sammen med Max Width 900px gir et breddeintervall som inkluderer begge grensene.
• Delete feature / Delete media state: Papirkurvkontrollene fjerner uttrykket eller hele den valgte Media-tilstanden. Fjern en foreldet regel i stedet for å la et uferdig uttrykk stå igjen.

Visningsstørrelser i redigeringsverktøyet

Menyen for visningsstørrelse starter på Laptop 1280x800. Velg en størrelse for å kontrollere oppsettet i redigeringsverktøyet. Besøkende ser siden med bredden og høyden til sin egen nettleser.

Åpne Preview for å kontrollere siden uten redigeringsverktøyets markeringskontroller. Endre også størrelsen på selve Preview-vinduet. En stor arbeidsflate kan strekke seg utover plassen mellom redigeringspanelene. Denne avkuttingen er noe annet enn innhold som går utenfor selve siden.

• Custom Size: Viser Page width og Page height. Hvis du ikke har skrevet egne mål, starter de på 1280 og 800. Skriv størrelser i CSS-piksler for å kontrollere et bestemt bruddpunkt, som 601 og 600 på hver sin side av en breddegrense.
• iPhone 14 Portrait: 390 × 844. Bruk den for å kontrollere et smalt og høyt oppsett.
• iPhone 14 Landscape: 844 × 390. Bruk den for å kontrollere bredt, men lavt innhold og skjemaer.
• iPad Portrait: 768 × 1024. Bruk den for et mellomstort og høyt visningsområde.
• iPad Landscape: 1024 × 768. Bruk den for et mellomstort og bredt visningsområde.
• Laptop 1280x800: 1280 × 800 og den valgte størrelsen fra start. Bruk den for det vanlige oppsettet på en datamaskin.
• Desktop 1440x900: 1440 × 900. Bruk den for å kontrollere bredere tekstlinjer og gitter.
• Desktop 1920x1080: 1920 × 1080. Bruk den for å kontrollere største bredder og overflødig tomrom på en stor skjerm.

Eksempler

Bredderegler endrer gitteret og størrelsen på overskriften. Høyde og retning kan kombineres for lave skjermer.

Eksempel: et produktgitter

Eksempelkatalogen inneholder Desk lamp til €40.00 og Pendant lamp til €75.00. Responsive grid har to like brede kolonner i Default State og én kolonne ved Max Width 600px. Ved 620px står kortene ved siden av hverandre. Ved 390px flyttes Pendant lamp under Desk lamp. Begge prisene og antallet produktposter er uendret.

Eksempel: lesbare overskrifter

Lag en overskriftsstil med Font Size 24px og Line Height 1.2 i Default State. Legg til en Media-tilstand med Min Width 800px og Font Size 40px. Legg stilen på Heading-elementet, ikke på Plain Text-elementet under det. Den samme overskriften bruker større skrift i brede visningsområder og mindre skrift under 800px, med én felles tekst.

Eksempel: et lavt, liggende visningsområde

Gi en toppseksjon Padding 48px 24px i Default State. Legg til en Media-tilstand med Orientation Landscape og Max Height 500px. Sett deretter Padding til 20px 24px i denne tilstanden. Begge betingelsene må være oppfylt: Et høyt nettleservindu beholder grunnavstanden, mens et lavt, liggende vindu bruker mindre plass i høyden. Kontroller at menyen og knappen fortsatt får plass og er tilgjengelige.

Begrensninger og vanlige feil

Velg CSS Class når du trenger menyen for Media-tilstander i en Style. Konfigurer Hover og Focus hver for seg, adskilt fra Media. Kontrollene tilbyr disse tilstandene separat. Kontroller utformingen ved hver bredde og under hver samhandling du bruker.

Bruk enheter for CSS-lengder, og kontroller spørringens faktiske visningsområde. Nettleserens zoomnivå, enhetens fysiske skjermoppløsning og bredden i CSS-piksler er ulike mål. Kontroller lang tekst, tastaturfokus, menyer, inndatafelt og innhold som går utenfor kanten, i tillegg til det første skjermbildet.

Sett Dataset-tilgang separat for private data, også innhold du skjuler på små skjermer. Bruk Datavju-redigeringsverktøyet på en datamaskin med minst 1280 × 720 CSS-piksler. Kontroller også hvordan siden vises for besøkende på mobil.

Vent til lagringen er ferdig, og åpne siden på nytt for å kontrollere innstillingene. Publiser på nytt for å vise den oppdaterte utformingen på en eksisterende offentlig side.

Relaterte artikler

Bruk Styles for CSS Class og Design System for delte, navngitte bruddpunkter.

• Styles: Lag og legg til CSS Class-stilen som inneholder de responsive innstillingene.
• Design System: Del designtokener og navngitte bruddpunkter for minste bredde.
• States: Endre komponentverdier når betingelser for variabler, data eller visningsområde er oppfylt.
• Story: Bygg og kontroller komponenttreet.
• Page: Konfigurer sidens data, navigasjon og resultat.

Responsiv utforming

Responsiv utforming tilpasser sidens oppsett og utseende til størrelsen på den besøkendes nettleservindu. I Datavju bruker du ett komponenttre og legger responsive tilstander til Styles av typen CSS Class. Bruk dem når et produktgitter, en meny, en overskrift eller et skjema trenger ulik avstand eller plassering på mobil, nettbrett og større skjermer.

Slik fungerer responsive Styles

Legg det vanlige oppsettet i Default State. Legg til en Media-tilstand for innstillingene som skal endres ved en bestemt bredde eller høyde. Teksten og de tilkoblede Table-radene hører til samme Page ved alle størrelser.

Bruk et navngitt bruddpunkt i Design System når hele nettstedet skal bruke samme breddegrense. Bruk en lokal Media-tilstand når siden ikke har et valgt Design System. Betingede States på vanlige komponenter kan også reagere på Media Property-verdier, som retning, når du vil endre innhold eller attributter i tillegg til CSS.

Lag et responsivt oppsett

Legg det vanlige oppsettet i Default State. Legg deretter til en størrelsesbetingelse for verdiene som skal endres.

1. Velg Styles i sidens venstre verktøylinje. Åpne menyen på roten av Styles-treet og velg Add Style.
2. Gi stilen navnet Responsive grid og sett Style Type til CSS Class.
3. I Default State legger du til Display med grid, Grid Template Columns med repeat(2, minmax(0, 1fr)) og Gap med 24px.
4. Velg Add States og åpne menyen med tre prikker ved States.
5. Uten et Design System velger du Media. Velg My Media State, deretter Add Feature Expression og Max Width. Lukk Media Features-panelet og skriv 600px i Max Width.
6. Med denne Media-tilstanden valgt legger du til Grid Template Columns med minmax(0, 1fr). Behold verdier som skal være like, i Default State.
7. Velg Product grid-elementet under Components. Bruk plusstegnet ved Properties, åpne Styles-kategorien og legg til Responsive grid. Fjern en direkte Grid Template Columns-verdi på elementet hvis den overstyrer den delte CSS Class-stilen.
8. Velg Custom Size i menyen for visningsstørrelse. Sett Page width til 620 og deretter 390. Gitteret skal gå fra to kolonner til én. Kontroller begge kortene og teksten deres.

Bruk et navngitt bruddpunkt fra Design System

Bruk et navngitt bruddpunkt når flere Styles skal dele samme minste bredde.

Velgeren starter på Choose breakpoint. Velg et bruddpunkt for å aktivere Add breakpoint state. Når du velger et Design System, bruker menyen de delte bruddpunktene derfra. Endre bredden i Definitions når alle elementer som bruker bruddpunktet, skal følge endringen. Publiser deretter de berørte sidene på nytt.

1. Godkjenn bruddpunktet i Design System under Definitions, inkludert minste bredde.
2. Velg dette Design System under General for nettstedet. Gjenbrukbare Components velger sitt eget Component Design System i komponentinnstillingene.
3. Åpne en Style av typen CSS Class, velg Add States ved behov og åpne States-menyen.
4. Velg bruddpunktet under Style named breakpoint, og velg deretter Add breakpoint state.
5. Velg den nye tilstanden og legg til CSS-innstillingene for denne minste bredden. Query-området viser hvilket navngitt bruddpunkt den bruker. Endre bruddpunktets bredde i Definitions.
6. Kontroller størrelser under, på og over denne bredden. Publiser det berørte resultatet på nytt når kildeendringene er godkjent.

Innstillinger for lokale mediespørringer

En ny Media-tilstand heter My Media State og har ingen mediebetingelser. Gi den et beskrivende navn, som Narrow catalog. Verdiene nedenfor gir ingen størrelsesbetingelse før du legger dem til og fyller dem ut. Bruk CSS-enheter for lengder, som 600px eller 40rem.

Flere Media-tilstander kan gjelde samtidig. Enkle regler for minste bredde i piksler som står etter hverandre, brukes fra mindre til større bredder. Regler for største bredde brukes fra større til mindre, slik at den snevreste størrelsesgrensen kommer sist. Navngitte bruddpunkter for minste bredde følger samme rekkefølge. Sammensatte spørringer, blandede spørringstyper og andre enheter beholder plasseringen fra da du la dem til. Vanlig CSS-prioritering gjelder fortsatt. Bruk ett tydelig grunnoppsett med bevisste overstyringer, og unngå overlappende regler som motarbeider hverandre.

• Width: Gjelder ved nøyaktig angitt bredde på visningsområdet. Bruk den bare når du trenger en eksakt bredde. 600px gjelder ikke også ved 601px.
• Min Width: Gjelder ved denne bredden og større bredder. Bruk 800px for å innføre et bredere oppsett fra denne grensen og oppover.
• Max Width: Gjelder ved denne bredden og mindre bredder. Bruk 600px for å plassere kort under hverandre i et smalt visningsområde.
• Height: Gjelder ved nøyaktig angitt høyde på visningsområdet. Et intervall er som regel mer nyttig når nettleserens egne kontroller endrer den tilgjengelige høyden.
• Min Height: Gjelder ved denne høyden og større høyder. Bruk 700px når ekstra plass i høyden skal gi et romsligere oppsett.
• Max Height: Gjelder ved denne høyden og mindre høyder. Bruk 500px for å redusere dekorative avstander i et lavt, liggende visningsområde.
• Orientation: Tilbyr Landscape og Portrait. Bruk den når oppsettet avhenger av formen på visningsområdet. Den identifiserer ikke en bestemt enhet og krever ingen fysisk rotasjonssensor.
• Add Feature Expression: Legger til en betingelse i denne spørringen. Alle betingelser i samme Media-tilstand må være oppfylt. Min Width 600px sammen med Max Width 900px gir et breddeintervall som inkluderer begge grensene.
• Delete feature / Delete media state: Papirkurvkontrollene fjerner uttrykket eller hele den valgte Media-tilstanden. Fjern en foreldet regel i stedet for å la et uferdig uttrykk stå igjen.

Visningsstørrelser i redigeringsverktøyet

Menyen for visningsstørrelse starter på Laptop 1280x800. Velg en størrelse for å kontrollere oppsettet i redigeringsverktøyet. Besøkende ser siden med bredden og høyden til sin egen nettleser.

Åpne Preview for å kontrollere siden uten redigeringsverktøyets markeringskontroller. Endre også størrelsen på selve Preview-vinduet. En stor arbeidsflate kan strekke seg utover plassen mellom redigeringspanelene. Denne avkuttingen er noe annet enn innhold som går utenfor selve siden.

• Custom Size: Viser Page width og Page height. Hvis du ikke har skrevet egne mål, starter de på 1280 og 800. Skriv størrelser i CSS-piksler for å kontrollere et bestemt bruddpunkt, som 601 og 600 på hver sin side av en breddegrense.
• iPhone 14 Portrait: 390 × 844. Bruk den for å kontrollere et smalt og høyt oppsett.
• iPhone 14 Landscape: 844 × 390. Bruk den for å kontrollere bredt, men lavt innhold og skjemaer.
• iPad Portrait: 768 × 1024. Bruk den for et mellomstort og høyt visningsområde.
• iPad Landscape: 1024 × 768. Bruk den for et mellomstort og bredt visningsområde.
• Laptop 1280x800: 1280 × 800 og den valgte størrelsen fra start. Bruk den for det vanlige oppsettet på en datamaskin.
• Desktop 1440x900: 1440 × 900. Bruk den for å kontrollere bredere tekstlinjer og gitter.
• Desktop 1920x1080: 1920 × 1080. Bruk den for å kontrollere største bredder og overflødig tomrom på en stor skjerm.

Eksempler

Bredderegler endrer gitteret og størrelsen på overskriften. Høyde og retning kan kombineres for lave skjermer.

Eksempel: et produktgitter

Eksempelkatalogen inneholder Desk lamp til €40.00 og Pendant lamp til €75.00. Responsive grid har to like brede kolonner i Default State og én kolonne ved Max Width 600px. Ved 620px står kortene ved siden av hverandre. Ved 390px flyttes Pendant lamp under Desk lamp. Begge prisene og antallet produktposter er uendret.

Eksempel: lesbare overskrifter

Lag en overskriftsstil med Font Size 24px og Line Height 1.2 i Default State. Legg til en Media-tilstand med Min Width 800px og Font Size 40px. Legg stilen på Heading-elementet, ikke på Plain Text-elementet under det. Den samme overskriften bruker større skrift i brede visningsområder og mindre skrift under 800px, med én felles tekst.

Eksempel: et lavt, liggende visningsområde

Gi en toppseksjon Padding 48px 24px i Default State. Legg til en Media-tilstand med Orientation Landscape og Max Height 500px. Sett deretter Padding til 20px 24px i denne tilstanden. Begge betingelsene må være oppfylt: Et høyt nettleservindu beholder grunnavstanden, mens et lavt, liggende vindu bruker mindre plass i høyden. Kontroller at menyen og knappen fortsatt får plass og er tilgjengelige.

Begrensninger og vanlige feil

Velg CSS Class når du trenger menyen for Media-tilstander i en Style. Konfigurer Hover og Focus hver for seg, adskilt fra Media. Kontrollene tilbyr disse tilstandene separat. Kontroller utformingen ved hver bredde og under hver samhandling du bruker.

Bruk enheter for CSS-lengder, og kontroller spørringens faktiske visningsområde. Nettleserens zoomnivå, enhetens fysiske skjermoppløsning og bredden i CSS-piksler er ulike mål. Kontroller lang tekst, tastaturfokus, menyer, inndatafelt og innhold som går utenfor kanten, i tillegg til det første skjermbildet.

Sett Dataset-tilgang separat for private data, også innhold du skjuler på små skjermer. Bruk Datavju-redigeringsverktøyet på en datamaskin med minst 1280 × 720 CSS-piksler. Kontroller også hvordan siden vises for besøkende på mobil.

Vent til lagringen er ferdig, og åpne siden på nytt for å kontrollere innstillingene. Publiser på nytt for å vise den oppdaterte utformingen på en eksisterende offentlig side.

Relaterte artikler

Bruk Styles for CSS Class og Design System for delte, navngitte bruddpunkter.

• Styles: Lag og legg til CSS Class-stilen som inneholder de responsive innstillingene.
• Design System: Del designtokener og navngitte bruddpunkter for minste bredde.
• States: Endre komponentverdier når betingelser for variabler, data eller visningsområde er oppfylt.
• Story: Bygg og kontroller komponenttreet.
• Page: Konfigurer sidens data, navigasjon og resultat.