Använda Brytpunkter för Responsiv Design i Tailwind CSS
Tailwind CSS gör det enkelt att skapa responsiva designer genom att erbjuda hjälparklasser för brytpunkter och mediefrågor.
Brytpunkter
Brytpunkter i Tailwind CSS definieras vid specifika skärmstorlekar, vilket gör det möjligt att tillämpa olika stilar vid olika vyportsbredder.
Standardbrytpunkter
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Dessa brytpunkter kan användas som prefix för att villkorligt tillämpa stilar baserat på vyportens bredd.
index.html
Förklaring
bg-blue-500: Ställer in bakgrundsfärgen till en blå nyans som standard;p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor;sm:bg-green-500: Ställer in bakgrundsfärgen till en grön nyans på små skärmar och större (min-width: 640px);md:bg-red-500: Ställer in bakgrundsfärgen till en röd nyans på medelstora skärmar och större (min-width: 768px);lg:bg-yellow-500: Ställer in bakgrundsfärgen till en gul nyans på stora skärmar och större (min-width: 1024px);xl:bg-purple-500: Ställer in bakgrundsfärgen till en lila nyans på extra stora skärmar och större (min-width: 1280px).
Tillämpning av responsiva stilar
Responsiva stilar kan tillämpas på valfri hjälparklass i Tailwind CSS genom att lägga till ett prefix med en brytpunkt.
index.html
Förklaring
Padding:
p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor som standard;sm:p-6: Lägger till en utfyllnad på 1,5rem (24px) på alla sidor för små skärmar och större (min-width: 640px);md:p-8: Lägger till en utfyllnad på 2rem (32px) på alla sidor för medelstora skärmar och större (min-width: 768px);lg:p-10: Lägger till en utfyllnad på 2,5rem (40px) på alla sidor för stora skärmar och större (min-width: 1024px);xl:p-12: Lägger till en utfyllnad på 3rem (48px) på alla sidor för extra stora skärmar och större (min-width: 1280px).
Textstorlek:
sm:text-sm: Anger teckenstorleken till liten (0,875rem eller 14px) för små skärmar och större (min-width: 640px);md:text-base: Anger teckenstorleken till bas (1rem eller 16px) för medelstora skärmar och större (min-width: 768px);lg:text-lg: Anger teckenstorleken till stor (1,125rem eller 18px) för stora skärmar och större (min-width: 1024px);xl:text-xl: Anger teckenstorleken till extra stor (1,25rem eller 20px) för extra stora skärmar och större (min-width: 1280px).
Teckensnittsvikt:
sm:font-light: Tillämpas lätt teckensnittsvikt för små skärmar och större (min-width: 640px);md:font-normal: Tillämpas normal teckensnittsvikt för medelstora skärmar och större (min-width: 768px);lg:font-semibold: Tillämpas halvfet teckensnittsvikt för stora skärmar och större (min-width: 1024px);xl:font-bold: Tillämpas fet teckensnittsvikt för extra stora skärmar och större (min-width: 1280px).
Obs
Söker du specifik information om responsivitet? Se följande länk.
1. Hur applicerar du en bakgrundsfärg vid md-brytpunkten?
2. Vilken hjälparklass ändrar padding vid sm-brytpunkten?
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 3.57Använda Brytpunkter för Responsiv Design i Tailwind CSS
Svep för att visa menyn
Tailwind CSS gör det enkelt att skapa responsiva designer genom att erbjuda hjälparklasser för brytpunkter och mediefrågor.
Brytpunkter
Brytpunkter i Tailwind CSS definieras vid specifika skärmstorlekar, vilket gör det möjligt att tillämpa olika stilar vid olika vyportsbredder.
Standardbrytpunkter
| Breakpoint | Description |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Dessa brytpunkter kan användas som prefix för att villkorligt tillämpa stilar baserat på vyportens bredd.
index.html
Förklaring
bg-blue-500: Ställer in bakgrundsfärgen till en blå nyans som standard;p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor;sm:bg-green-500: Ställer in bakgrundsfärgen till en grön nyans på små skärmar och större (min-width: 640px);md:bg-red-500: Ställer in bakgrundsfärgen till en röd nyans på medelstora skärmar och större (min-width: 768px);lg:bg-yellow-500: Ställer in bakgrundsfärgen till en gul nyans på stora skärmar och större (min-width: 1024px);xl:bg-purple-500: Ställer in bakgrundsfärgen till en lila nyans på extra stora skärmar och större (min-width: 1280px).
Tillämpning av responsiva stilar
Responsiva stilar kan tillämpas på valfri hjälparklass i Tailwind CSS genom att lägga till ett prefix med en brytpunkt.
index.html
Förklaring
Padding:
p-4: Lägger till en utfyllnad på 1rem (16px) på alla sidor som standard;sm:p-6: Lägger till en utfyllnad på 1,5rem (24px) på alla sidor för små skärmar och större (min-width: 640px);md:p-8: Lägger till en utfyllnad på 2rem (32px) på alla sidor för medelstora skärmar och större (min-width: 768px);lg:p-10: Lägger till en utfyllnad på 2,5rem (40px) på alla sidor för stora skärmar och större (min-width: 1024px);xl:p-12: Lägger till en utfyllnad på 3rem (48px) på alla sidor för extra stora skärmar och större (min-width: 1280px).
Textstorlek:
sm:text-sm: Anger teckenstorleken till liten (0,875rem eller 14px) för små skärmar och större (min-width: 640px);md:text-base: Anger teckenstorleken till bas (1rem eller 16px) för medelstora skärmar och större (min-width: 768px);lg:text-lg: Anger teckenstorleken till stor (1,125rem eller 18px) för stora skärmar och större (min-width: 1024px);xl:text-xl: Anger teckenstorleken till extra stor (1,25rem eller 20px) för extra stora skärmar och större (min-width: 1280px).
Teckensnittsvikt:
sm:font-light: Tillämpas lätt teckensnittsvikt för små skärmar och större (min-width: 640px);md:font-normal: Tillämpas normal teckensnittsvikt för medelstora skärmar och större (min-width: 768px);lg:font-semibold: Tillämpas halvfet teckensnittsvikt för stora skärmar och större (min-width: 1024px);xl:font-bold: Tillämpas fet teckensnittsvikt för extra stora skärmar och större (min-width: 1280px).
Obs
Söker du specifik information om responsivitet? Se följande länk.
1. Hur applicerar du en bakgrundsfärg vid md-brytpunkten?
2. Vilken hjälparklass ändrar padding vid sm-brytpunkten?
Tack för dina kommentarer!
