Använd dessa tips för att skapa responsiva layouter effektivt.
Föreställ dig att du har gjort allt det hårda arbetet för att göra en riktigt cool layout. Men sedan, när du gör ditt webbläsarfönster bara lite mindre, hittar du något som svämmar över. Du slänger in en mediefråga för att åtgärda problemet. Men när du ändrar storlek på fönstret märker du att något annat har gått sönder.
Detta är något som de flesta CSS-utvecklare kommer att uppleva vid ett tillfälle. Men som tur är har vi flera moderna CSS-lösningar som gör det så mycket lättare att bara utveckla saker och få dem att fungera bra. Den här artikeln utforskar 5 användbara metoder att tänka på när du utvecklar webbplatser. Dessa tips hjälper dig att undvika irriterande avbrott i din design.
1. Börja med en global stilmall
Börja alltid med global styling när du skriver CSS. Oroa dig inte för layouten. Ange istället generiska stilar som typografi, färger och bakgrunder. Återställ marginaler, ta bort understrykningar från länkar och så vidare.
När du är klar med den allmänna stilen kan du börja skapa layouten och rikta in dig på enskilda element i layouten. Börja i princip från toppen och gå sedan in på elementen.
Följande CSS-exempel återställer marginalen på alla element till 0, definierar typografin och färgen för alla huvudrubriker och lägger till en konsekvent marginal till dem alla:
kropp,
h1,
h2,
h3,
sid {
marginal: 0;
}h1,
h2,
h3 {
Färg: blå;
typsnittsfamilj: "Verdana" sans serif;
teckensnittsvikt: 900;
radavstånd: 1;
}
h2,
h3,
sid {
marginal-botten: 1rem;
}
Nu när du har definierat alla basstilar kan du bygga därifrån. Du kan till exempel lägga till stoppning i behållarelementet. Detta kommer att trycka bort innehållet från kanterna på din webbläsare. Då kan du ansöka om en maximal bredd till bilder, så att de kan anpassa sig till bredden på sin behållare. Poängen är att utgå från de allmänna elementen innan du riktar in dig på specifika element.
Återigen kommer layouten att vara responsiv. Så när du ändrar skärmstorleken kommer storleken på elementen att ändras därefter. Som utvecklare bör du vara medveten om dessa CSS-tips och tricks eftersom de kan ta din produktivitet till en nästa nivå.
2. Undvik fasta storlekar
När du börjar tänka på layouter är det allra första du bör tänka på att undvika fasta storlekar. Fasta storlekar avser egenskaper som bredd: 1000px, höjd: 200px, och så vidare. Att ställa in en fast höjd eller bredd kommer bara att orsaka problem i det långa loppet.
Använd istället anpassningsbara höjder och bredder. Ett sätt är att använda min-höjd och min bredd istället för höjd och bredd. Anta till exempel att du ställer in bredden på ett element till 600px. När du blir mindre än 600px kommer innehållet att svämma över:
Istället bör du byta fastighet från bredd till maximal bredd. Med maximal bredd, kommer elementet att tillåtas att krympa när webbläsarfönstret begränsas. Och om fönstret blir brett expanderar texten tillbaka till sin ursprungliga längd. Här är resultatet:
Detta är samma för höjd. Anta till exempel att du ställer in höjd av en rubrik till ett fast värde på 200 pixlar.
rubrik {
höjd: 200px;
visa: rutnät;
platsobjekt: Centrum;
}
Detta centrerar allt i sidhuvudet perfekt. Men när du begränsar webbläsarfönstret kommer innehållet så småningom att flöda ut ur sin behållare. Och detta beror på att du ställer in en fast höjd på huvudet.
Allmänt, höjd och bredd är båda farliga egenskaper. Lösningen är att använda den anpassningsbara höjden och bredden, dvs. min- och maximal höjd, och min- och maximal bredd. I dessa fall, om webbläsaren hamnar i situationer där innehållet blir längre, kommer rubriken att växa för att anpassa sig till det.
Detta är en av de vanligaste CSS-misstagen som du bör undvika.
3. Kom ihåg att din webbplats är responsiv som standard
Tänk på att din webbplats är responsiv redan innan du skriver en enda rad med CSS-kod. Detta tänkesätt kan hjälpa dig att undvika att överkomplicera designprocessen. Layouten kommer att fungera på stora skärmar och små skärmar. Det kanske inte är snyggt. Det kan till och med vara svårt att läsa på storbildsskärmar. Men webbplatsen anpassar sig till visningsporten oavsett storlek.
Naturligtvis kan bilderna svämma över och texten kan vara för liten. Men du kommer inte att förlora något med standardlayouten. Din text kommer inte att gå sönder, och alla element kommer att synas på skärmen.
Att förstå och omfamna detta faktum kan verkligen hjälpa när du skriver din CSS-kod. När du stöter på problem är du säker på att felet härrör från CSS som du skrev. Detta gör det lättare att hitta problemet och åtgärda det.
Försök att bara använda mediefrågor för att lägga till komplexitet. Till exempel när du vill att din layout ska ha tre kolumner på större skärmar. Annars, använd dem inte. För en djupdykning i mediefrågor, läs vår guide för mediafrågor.
Här är ett scenario. Föreställ dig att elementet med klassnamnet .dela har tre element inom sig. Med följande CSS skapas en layout med tre kolumner:
.dela {
visa: böja;
flex-riktning: rad;
glipa: 2rem;
}
På mindre skärmar (40 em bred eller mindre), vill du att allt ska uppta en enda kolumn. Så här skulle du göra:
@media(maximal bredd: 40 em) {
.dela {
visa: blockera;
}
}
Här åsidosätter du standardjusteringen (tre kolumner). Men mediefrågan är onödig eftersom webbläsaren använder display: block som standard. Så du behöver inte uttryckligen definiera det.
Med det i åtanke kan du omstrukturera din kod för att använda en enda mediefråga som endast gäller stora skärmar. Där växlar du till tre kolumner när skärmen är bredare än 40 em:
@media(maximal bredd: 40 em) {
.dela {
visa: böja;
flex-riktning: rad;
glipa: 2rem;
}
}
På små skärmar staplar webbläsaren allt i en enda kolumn. Men du behöver inte ange det eftersom webbläsaren använder display: block som standard. Således har du bara använt mediefrågor för att lägga till komplexitet.
Så istället för att lägga till komplexiteten och sedan behöva åsidosätta en massa egenskaper, lägger du nu till komplexiteten när du behövde den. För det mesta behöver du bara min bredd mediefrågor. Börja med mobilen först, sedan när webbplatsen ser bra ut på mobilen lägger du till komplexiteten (t.ex. kolumner) för skrivbordsversionen.
5. Dra fördel av modern CSS
Med hjälp av moderna CSS-metoder kan du komma bort från de flesta anpassningsproblem och brytpunkter och gå mot att uppnå inneboende design.
Ett sätt du kan göra det är:
h1 { font-size: clamp (3rem, 1rem + 10vw, 7rem)}
Detta klämmer fast h1 mellan en lägsta och högsta teckenstorlek. Det minsta vi vill att det ska gå till är 3 rem och den högsta är 7 rem. Mitten är vad vi ska iterera över (1rem + 10 vw). Resultatet blir att titeln automatiskt krymper när visningsporten blir mindre och växer när den blir större.
Lär dig mer om modern CSS
CSS har utvecklats mycket under åren. Idag har vi nyare och bättre tillvägagångssätt för positionering av element i CSS. I den här artikeln har vi berört några av dessa metoder och belyst hur de kan hjälpa dig att undvika vanliga designfallgropar. Ett av de bästa sätten att lära sig modern CSS är genom den praktiska metoden, som att använda modern CSS för att designa en HTML-tabell.
