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
Can you explain how to use custom breakpoints in Tailwind CSS?
What are some best practices for responsive design with Tailwind?
Can you give more examples of responsive utility classes?
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!
