5 nyttige tips til at skabe responsive layouts

Forestil dig, at du har gjort alt det hårde arbejde for at lave et rigtig fedt layout. Men så, når du gør dit browservindue bare en lille smule mindre, finder du noget, der flyder over. Du kaster en medieforespørgsel ind for at løse problemet. Men når du ændrer størrelsen på vinduet, bemærker du, at noget andet er gået i stykker.

Dette er noget, som de fleste CSS-udviklere vil opleve på et tidspunkt. Men heldigvis har vi flere moderne CSS-løsninger, der gør det så meget nemmere bare at udvikle tingene og få dem til at fungere godt. Denne artikel udforsker 5 nyttige fremgangsmåder, du skal huske på, når du udvikler websteder. Disse tips hjælper dig med at undgå irriterende brud i dit design.

1. Begynd med et globalt stilark

Start altid med global styling, når du skriver CSS. Du skal ikke bekymre dig om layoutet. Indstil i stedet generiske stilarter som typografi, farver og baggrunde. Nulstil margener, fjern understregninger fra links og så videre.

Når du er færdig med den generelle styling, kan du begynde at oprette layoutet og målrette mod individuelle elementer i layoutet. Grundlæggende, start fra toppen og bevæg dig derefter ind på elementerne.

Følgende CSS-eksempel nulstiller margenen på alle elementer til 0, definerer typografien og farven for alle større overskrifter og tilføjer en konsistent margen til dem alle:

legeme,
h1,
h2,
h3,
s {
margen: 0;
}
h1,
h2,
h3 {
farve: blå;
skrifttype-familie: "Verdana" sans serif;
skrifttype-vægt: 900;
linjehøjde: 1;
}
h2,
h3,
s {
margin-bund: 1rem;
}

Nu hvor du har defineret alle de grundlæggende stilarter, kan du bygge derfra. For eksempel kan du tilføje polstring til beholderelementet. Dette vil skubbe indholdet væk fra kanterne af din browser. Så kan du ansøge en max-bredde til billeder, så de kan tilpasse sig bredden af ​​deres beholder. Pointen er at tage udgangspunkt i de generelle elementer, før du målretter mod specifikke elementer.

Igen vil layoutet være responsivt. Så når du ændrer skærmstørrelsen, ændres størrelsen af ​​elementer i overensstemmelse hermed. Som udvikler bør du være opmærksom på disse CSS tips og tricks da de kan tage din produktivitet til et næste niveau.

2. Undgå faste størrelser

Når du begynder at tænke på layout, er det allerførste, du skal huske på, at undgå faste størrelser. Faste størrelser henviser til egenskaber som bredde: 1000px, højde: 200px, og så videre. Indstilling af en fast højde eller bredde vil kun give dig problemer i det lange løb.

Brug i stedet justerbare højder og bredder. En måde er at bruge min-højde og min bredde i stedet for højde og bredde. Antag for eksempel, at du indstiller bredden af ​​et element til 600px. Når du bliver mindre end 600px, vil indholdet flyde over:

I stedet bør du ændre ejendommen fra bredde til max-bredde. Med max-bredde, får elementet lov til at krympe, når browservinduet indsnævres. Og hvis vinduet bliver bredt, udvides teksten tilbage til sin oprindelige længde. Her er resultatet:

Dette er det samme for højde. Antag for eksempel, at du indstiller højde af en overskrift til en fast værdi på 200 px.

header {
højde: 200px;
Skærm: gitter;
sted-genstande: centrum;
}

Dette centrerer alt i headeren perfekt. Men når du indsnævrer browservinduet, vil indholdet til sidst flyde ud af sin beholder. Og det skyldes, at du indstiller en fast højde på skærebordet.

Generelt, højde og bredde er begge farlige egenskaber. Løsningen er at bruge den justerbare højde og bredde, dvs. min- og max-højde, og min- og max-bredde. I disse tilfælde, hvis browseren løber ind i situationer, hvor indholdet bliver længere, vil overskriften vokse for at tilpasse sig det.

Dette er en af ​​de mest almindelige CSS-fejl, som du bør undgå.

3. Husk, at dit websted er responsivt som standard

Husk på, at din hjemmeside er responsiv, allerede før du skriver en enkelt linje med CSS-kode. Denne tankegang kan hjælpe dig med at undgå at overkomplicere designprocessen. Layoutet kommer til at fungere på massive skærme og små skærme. Det er måske ikke kønt. Det kan endda være svært at læse på storskærme. Men hjemmesiden tilpasser sig visningen uanset størrelsen.

Selvfølgelig kan billederne flyde over, og teksten kan være for lille. Men du kommer ikke til at miste noget med standardlayoutet. Din tekst vil ikke bryde, og alle elementer vil være synlige på skærmen.

At forstå og omfavne dette faktum kan virkelig hjælpe, når du skriver din CSS-kode. Når du støder på problemer, vil du være sikker på, at fejlen stammer fra den CSS, du skrev. Dette gør det nemmere at finde problemet og rette det.

Prøv kun at bruge medieforespørgsler for at tilføje kompleksitet. For eksempel, når du ønsker, at dit layout skal have tre kolonner på større skærme. Ellers må du ikke bruge dem. For et dybt dyk ned i medieforespørgsler, læs vores guide til medieforespørgsler.

Her er et scenarie. Forestil dig, at elementet med et klassenavn på .dele har tre elementer i sig. Med følgende CSS oprettes et layout med tre kolonner:

.dele {
Skærm: bøje;
flex-retning: række;
hul: 2rem;
}

På mindre skærme (40 em bred eller mindre), vil du have, at alt skal optage en enkelt kolonne. Så du ville gøre dette:

@medier(maks. bredde: 40 em) {
.dele {
Skærm: blok;
 }
}

Her tilsidesætter du standardjusteringen (tre kolonner). Men medieforespørgslen er unødvendig, fordi browseren bruger display: blok som standard. Så du behøver ikke at definere det eksplicit.

Med det i tankerne kan du omfaktorere din kode til at bruge en enkelt medieforespørgsel, der kun gælder for store skærme. Der skifter du til tre kolonner, når skærmen er bredere end 40 em:

@medier(maks. bredde: 40 em) {
.dele {
Skærm: bøje;
flex-retning: række;
hul: 2rem;
 }
}

På små skærme stabler browseren alt i en enkelt kolonne. Men du behøver ikke at angive det, fordi browseren bruger display: blok som standard. Du har således kun brugt medieforespørgsler til at tilføje kompleksitet.

Så i stedet for at tilføje kompleksiteten og derefter skulle tilsidesætte en masse egenskaber, tilføjer du nu kompleksiteten, når du havde brug for det. Det meste af tiden har du kun brug for min bredde medieforespørgsler. Start med mobilen først, og når siden ser godt ud på mobilen, skal du tilføje kompleksiteten (f.eks. kolonner) for desktopversionen.

5. Udnyt moderne CSS

Ved at bruge moderne CSS-tilgange kan du komme væk fra de fleste tilpasningsproblemer og brudpunkter og bevæge dig hen imod at opnå iboende design.

En måde du kan gøre det på er:

h1 {font-size: clamp (3rem, 1rem + 10vw, 7rem)}

Dette klemmer h1 mellem minimum og maksimum skriftstørrelse. Det mindste, vi ønsker, det skal gå til, er 3 rem og det højeste er 7 rem. Midten er det, vi gentager (1rem + 10 vw). Resultatet er, at titlen automatisk krymper, efterhånden som viewporten bliver mindre og vokser, efterhånden som den bliver større.

Lær mere om moderne CSS

CSS har udviklet sig meget gennem årene. I dag har vi nyere og bedre tilgange til positionering af elementer i CSS. I denne artikel kom vi ind på nogle af disse fremgangsmåder og fremhævede, hvordan de kan hjælpe dig med at undgå almindelige design-fælder. En af de bedste måder at lære moderne CSS på er via den praktiske tilgang, såsom at bruge moderne CSS til at designe en HTML-tabel.