CMS Styling - Utformning för mobil vs iPad/Desktop View
Kunderna kommer att se din plattform på olika enheter, allt från små mobilskärmar till stora datorskärmar, så det är viktigt att din plattform ser bra ut när den visas på alla enheter.
Den standardkonfiguration och styling som vi har använt i vår plattformseditor gör att många av komponenterna kan anpassas väl för olika skärmstorlekar, men det finns vissa situationer där du kan behöva redigera viss styling manuellt för att den ska optimeras.
När du lägger till en styling (t.ex. text-lg ), kommer denna styling att tillämpas på alla skärmstorlekar.
När du behöver använda olika stilar för olika skärmstorlekar bör du använda prefixen "brytpunkt/breaking point" för att definiera vilken stil som gäller för vilka skärmstorlekar. Du hittar en fullständig lista över brytpunktsprefix/breaking point på https://tailwindcss.com/docs/responsive-design .
Ibland behöver du inte använda någon brytpunktstyling/breaking point. När du behöver använda den räcker det i 99% av fallen att definiera endast en brytpunkt med sm:### (som påverkar skärmstorlekar på 640 pixlar eller större - en typisk maxstorlek för mobila enheter), tillsammans med en standardstyling med ### (dvs. utan någon brytpunkt, som därför kommer att tillämpas på skärmstorlekar som är mindre än 640 pixlar). Detta gör att du kan definiera en annan styling för mobila enheter jämfört med andra enheter.
När du lägger till en styling med hjälp av denna brytpunkt (t.ex. sm:text-2xl ), kommer denna styling att tillämpas när enheten har en skärmstorlek större än 640px.
Intuitivt kan du tro att "sm" betyder att denna styling gäller för "små" enheter, men så är inte fallet, eftersom Tailwind fungerar med mobil-första design. Det är viktigt att komma ihåg att all brytpunktstyling du använder kommer att tillämpas på enheter som är större än den brytpunktens skärmstorlek.
Som visas i exemplet ovan är denna brytpunktstyling ofta användbar för texter, där du vill att texten ska vara mindre för mobilvisning (t.ex. text-lg ) och större för iPad/Desktop-visning (t.ex. sm:text-2xl ).
Andra exempel där vi ofta använder breakpoint styling är för sponsor/partnerlogotyper och för knappar.
För sponsor-/partnerlogotyper kan det vara bra att logotyperna är mindre för mobilvisning (t.ex. h-24 och w-24 ) och större för iPad-/datorvisning (t.ex. sm:h-36 och sm:w-36 ). Du kanske också vill att marginalerna mellan varje logotyp ska vara mindre för mobilvisning (t.ex. m-2 ) och större för iPad/Desktop-visning (t.ex. sm:m-4 ).
På samma sätt för knappar kan det vara bra att justera textstorleken, knappstorleken/paddingen och marginalerna, så att dina knappar ser bra ut på alla skärmstorlekar!
Dessa brytpunkter kan tillämpas på absolut all styling som du lägger till på plattformen, och du kanske märker att de tillämpas som standard på vissa komponenter, till exempel Vertical Content Feed, som har olika antal kolumner beroende på skärmstorlek.
I plattformsredigeraren kan du klicka på ikonen längst upp till höger för att växla mellan förhandsgranskningsläget för desktop och förhandsgranskningsläget för mobil, enligt bilden nedan.
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på Spara längst ned till vänster för att spara dina ändringar, då får du en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på Publicera för att göra dem tillgängliga på plattformen. Du kan också trycka på Släng utkast för att radera alla dina ändringar efter den senaste publiceringen.
Den standardkonfiguration och styling som vi har använt i vår plattformseditor gör att många av komponenterna kan anpassas väl för olika skärmstorlekar, men det finns vissa situationer där du kan behöva redigera viss styling manuellt för att den ska optimeras.
När du lägger till en styling (t.ex. text-lg ), kommer denna styling att tillämpas på alla skärmstorlekar.
När du behöver använda olika stilar för olika skärmstorlekar bör du använda prefixen "brytpunkt/breaking point" för att definiera vilken stil som gäller för vilka skärmstorlekar. Du hittar en fullständig lista över brytpunktsprefix/breaking point på https://tailwindcss.com/docs/responsive-design .
Ibland behöver du inte använda någon brytpunktstyling/breaking point. När du behöver använda den räcker det i 99% av fallen att definiera endast en brytpunkt med sm:### (som påverkar skärmstorlekar på 640 pixlar eller större - en typisk maxstorlek för mobila enheter), tillsammans med en standardstyling med ### (dvs. utan någon brytpunkt, som därför kommer att tillämpas på skärmstorlekar som är mindre än 640 pixlar). Detta gör att du kan definiera en annan styling för mobila enheter jämfört med andra enheter.
När du lägger till en styling med hjälp av denna brytpunkt (t.ex. sm:text-2xl ), kommer denna styling att tillämpas när enheten har en skärmstorlek större än 640px.
Intuitivt kan du tro att "sm" betyder att denna styling gäller för "små" enheter, men så är inte fallet, eftersom Tailwind fungerar med mobil-första design. Det är viktigt att komma ihåg att all brytpunktstyling du använder kommer att tillämpas på enheter som är större än den brytpunktens skärmstorlek.
Som visas i exemplet ovan är denna brytpunktstyling ofta användbar för texter, där du vill att texten ska vara mindre för mobilvisning (t.ex. text-lg ) och större för iPad/Desktop-visning (t.ex. sm:text-2xl ).
Andra exempel där vi ofta använder breakpoint styling är för sponsor/partnerlogotyper och för knappar.
För sponsor-/partnerlogotyper kan det vara bra att logotyperna är mindre för mobilvisning (t.ex. h-24 och w-24 ) och större för iPad-/datorvisning (t.ex. sm:h-36 och sm:w-36 ). Du kanske också vill att marginalerna mellan varje logotyp ska vara mindre för mobilvisning (t.ex. m-2 ) och större för iPad/Desktop-visning (t.ex. sm:m-4 ).
På samma sätt för knappar kan det vara bra att justera textstorleken, knappstorleken/paddingen och marginalerna, så att dina knappar ser bra ut på alla skärmstorlekar!
Dessa brytpunkter kan tillämpas på absolut all styling som du lägger till på plattformen, och du kanske märker att de tillämpas som standard på vissa komponenter, till exempel Vertical Content Feed, som har olika antal kolumner beroende på skärmstorlek.
I plattformsredigeraren kan du klicka på ikonen längst upp till höger för att växla mellan förhandsgranskningsläget för desktop och förhandsgranskningsläget för mobil, enligt bilden nedan.
Spara och publicera
När du har gjort ändringar i plattformsredigeraren ska du alltid komma ihåg att trycka på Spara längst ned till vänster för att spara dina ändringar, då får du en förhandsgranskning till höger.
Om du är nöjd med dina ändringar trycker du på Publicera för att göra dem tillgängliga på plattformen. Du kan också trycka på Släng utkast för att radera alla dina ändringar efter den senaste publiceringen.
Uppdaterad den: 07/11/2024
Tack så mycket!