Bruk av Brytpunkter for Responsivt Design i Tailwind CSS
Tailwind CSS gjør det enkelt å lage responsive design ved å tilby hjelpeklasser for brytpunkter og medieforespørsler.
Brytpunkter
Brytpunkter i Tailwind CSS er definert ved spesifikke skjermstørrelser, slik at du kan bruke ulike stiler ved forskjellige visningsbredder.
Standard brytpunkter
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Disse brytpunktene kan brukes som prefikser for å bruke stiler betinget basert på visningsbredden.
index.html
Forklaring
bg-blue-500: Angir bakgrunnsfargen til en blånyanse som standard;p-4: Legger til polstring på 1rem (16px) på alle sider;sm:bg-green-500: Angir bakgrunnsfargen til en grønn nyanse på små skjermer og større (min-bredde: 640px);md:bg-red-500: Angir bakgrunnsfargen til en rød nyanse på mellomstore skjermer og større (min-bredde: 768px);lg:bg-yellow-500: Angir bakgrunnsfargen til en gul nyanse på store skjermer og større (min-bredde: 1024px);xl:bg-purple-500: Angir bakgrunnsfargen til en lilla nyanse på ekstra store skjermer og større (min-bredde: 1280px).
Bruk av responsive stiler
Du kan bruke responsive stiler på enhver verktøyklasse i Tailwind CSS ved å sette et breakpoint-prefiks foran klassen.
index.html
Forklaring
Polstring:
p-4: Legger til polstring på 1rem (16px) på alle sider som standard;sm:p-6: Legger til polstring på 1.5rem (24px) på alle sider for små skjermer og større (min-bredde: 640px);md:p-8: Legger til polstring på 2rem (32px) på alle sider for mellomstore skjermer og større (min-bredde: 768px);lg:p-10: Legger til polstring på 2.5rem (40px) på alle sider for store skjermer og større (min-bredde: 1024px);xl:p-12: Legger til polstring på 3rem (48px) på alle sider for ekstra store skjermer og større (min-bredde: 1280px).
Tekststørrelse:
sm:text-sm: Setter skriftstørrelsen til liten (0.875rem eller 14px) for små skjermer og større (min-bredde: 640px);md:text-base: Setter skriftstørrelsen til base (1rem eller 16px) for mellomstore skjermer og større (min-bredde: 768px);lg:text-lg: Setter skriftstørrelsen til stor (1.125rem eller 18px) for store skjermer og større (min-bredde: 1024px);xl:text-xl: Setter skriftstørrelsen til ekstra stor (1.25rem eller 20px) for ekstra store skjermer og større (min-bredde: 1280px).
Skriftvekt:
sm:font-light: Bruker lett skriftvekt for små skjermer og større (min-bredde: 640px);md:font-normal: Bruker normal skriftvekt for mellomstore skjermer og større (min-bredde: 768px);lg:font-semibold: Bruker halvfet skriftvekt for store skjermer og større (min-bredde: 1024px);xl:font-bold: Bruker fet skriftvekt for ekstra store skjermer og større (min-bredde: 1280px).
Merk
Ser du etter spesifikk informasjon om responsivitet? Se følgende lenke.
1. Hvordan bruker du en bakgrunnsfarge ved md-brytningspunktet?
2. Hvilken hjelpeklasse endrer polstringen ved sm-brytningspunktet?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 3.57Bruk av Brytpunkter for Responsivt Design i Tailwind CSS
Sveip for å vise menyen
Tailwind CSS gjør det enkelt å lage responsive design ved å tilby hjelpeklasser for brytpunkter og medieforespørsler.
Brytpunkter
Brytpunkter i Tailwind CSS er definert ved spesifikke skjermstørrelser, slik at du kan bruke ulike stiler ved forskjellige visningsbredder.
Standard brytpunkter
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Disse brytpunktene kan brukes som prefikser for å bruke stiler betinget basert på visningsbredden.
index.html
Forklaring
bg-blue-500: Angir bakgrunnsfargen til en blånyanse som standard;p-4: Legger til polstring på 1rem (16px) på alle sider;sm:bg-green-500: Angir bakgrunnsfargen til en grønn nyanse på små skjermer og større (min-bredde: 640px);md:bg-red-500: Angir bakgrunnsfargen til en rød nyanse på mellomstore skjermer og større (min-bredde: 768px);lg:bg-yellow-500: Angir bakgrunnsfargen til en gul nyanse på store skjermer og større (min-bredde: 1024px);xl:bg-purple-500: Angir bakgrunnsfargen til en lilla nyanse på ekstra store skjermer og større (min-bredde: 1280px).
Bruk av responsive stiler
Du kan bruke responsive stiler på enhver verktøyklasse i Tailwind CSS ved å sette et breakpoint-prefiks foran klassen.
index.html
Forklaring
Polstring:
p-4: Legger til polstring på 1rem (16px) på alle sider som standard;sm:p-6: Legger til polstring på 1.5rem (24px) på alle sider for små skjermer og større (min-bredde: 640px);md:p-8: Legger til polstring på 2rem (32px) på alle sider for mellomstore skjermer og større (min-bredde: 768px);lg:p-10: Legger til polstring på 2.5rem (40px) på alle sider for store skjermer og større (min-bredde: 1024px);xl:p-12: Legger til polstring på 3rem (48px) på alle sider for ekstra store skjermer og større (min-bredde: 1280px).
Tekststørrelse:
sm:text-sm: Setter skriftstørrelsen til liten (0.875rem eller 14px) for små skjermer og større (min-bredde: 640px);md:text-base: Setter skriftstørrelsen til base (1rem eller 16px) for mellomstore skjermer og større (min-bredde: 768px);lg:text-lg: Setter skriftstørrelsen til stor (1.125rem eller 18px) for store skjermer og større (min-bredde: 1024px);xl:text-xl: Setter skriftstørrelsen til ekstra stor (1.25rem eller 20px) for ekstra store skjermer og større (min-bredde: 1280px).
Skriftvekt:
sm:font-light: Bruker lett skriftvekt for små skjermer og større (min-bredde: 640px);md:font-normal: Bruker normal skriftvekt for mellomstore skjermer og større (min-bredde: 768px);lg:font-semibold: Bruker halvfet skriftvekt for store skjermer og større (min-bredde: 1024px);xl:font-bold: Bruker fet skriftvekt for ekstra store skjermer og større (min-bredde: 1280px).
Merk
Ser du etter spesifikk informasjon om responsivitet? Se følgende lenke.
1. Hvordan bruker du en bakgrunnsfarge ved md-brytningspunktet?
2. Hvilken hjelpeklasse endrer polstringen ved sm-brytningspunktet?
Takk for tilbakemeldingene dine!
