5 handige tips voor het maken van responsieve lay-outs

Stel je voor dat je al het harde werk hebt gedaan om een ​​echt coole lay-out te maken. Maar als u dan uw browservenster een klein beetje kleiner maakt, vindt u iets dat overloopt. U gooit een mediaquery in om het probleem op te lossen. Maar bij het wijzigen van het formaat van het venster, merkt u dat er iets anders kapot is gegaan.

Dit is iets dat de meeste CSS-ontwikkelaars op een gegeven moment zullen ervaren. Maar gelukkig hebben we verschillende moderne CSS-oplossingen die het zoveel gemakkelijker maken om gewoon dingen te ontwikkelen en ze goed te laten werken. Dit artikel onderzoekt 5 handige praktijken om in gedachten te houden bij het ontwikkelen van websites. Met deze tips voorkom je vervelende breuken in je ontwerp.

1. Begin met een globaal stijlblad

Begin altijd met globale styling bij het schrijven van CSS. Maak je geen zorgen over de lay-out. Stel in plaats daarvan generieke stijlen in, zoals typografie, kleuren en achtergronden. Stel marges opnieuw in, verwijder onderstrepingen van links, enzovoort.

Nadat u klaar bent met de algemene styling, kunt u beginnen met het maken van de lay-out en het richten op individuele elementen binnen de lay-out. Begin in principe vanaf de bovenkant en ga dan verder met de elementen.

Het volgende CSS-voorbeeld zet de marge op alle elementen terug op 0, definieert de typografie en kleur van alle hoofdkoppen en voegt een consistente marge toe aan alle elementen:

lichaam,
h1,
h2,
h3,
P {
marge: 0;
}
h1,
h2,
h3 {
kleur: blauw;
font-familie: "Verdana" schreefloos;
lettertype dikte: 900;
lijnhoogte: 1;
}
h2,
h3,
P {
marge-bodem: 1rem;
}

Nu je alle basisstijlen hebt gedefinieerd, kun je vanaf daar bouwen. U kunt bijvoorbeeld opvulling toevoegen aan het containerelement. Hierdoor wordt de inhoud weggeduwd van de randen van uw browser. Dan kunt u een Maximale wijdte aan afbeeldingen, zodat ze zich kunnen aanpassen aan de breedte van hun container. Het punt is om uit te gaan van de algemene elementen voordat u zich richt op specifieke elementen.

Nogmaals, de lay-out zal responsief zijn. Dus als u de schermgrootte wijzigt, verandert de grootte van de elementen dienovereenkomstig. Als ontwikkelaar moet u op de hoogte zijn van deze CSS-tips en -trucs omdat ze uw productiviteit naar een hoger niveau kunnen tillen.

2. Vermijd vaste maten

Wanneer u begint na te denken over lay-outs, moet u in de eerste plaats in gedachten houden dat u vaste formaten vermijdt. Vaste maten verwijzen naar eigenschappen zoals breedte: 1000px, hoogte: 200px, enzovoort. Het instellen van een vaste hoogte of breedte levert op de lange termijn alleen maar problemen op.

Gebruik in plaats daarvan aanpasbare hoogtes en breedtes. Een manier is om te gebruiken min-hoogte En min-breedte in plaats van hoogte En breedte. Stel dat u de breedte van een element instelt op 600px. Als je kleiner gaat dan 600px, zal de inhoud overlopen:

In plaats daarvan moet u de eigenschap wijzigen van breedte naar Maximale wijdte. Met Maximale wijdte, mag het element kleiner worden naarmate het browservenster kleiner wordt. En als het venster breed wordt, zal de tekst weer uitzetten tot zijn oorspronkelijke lengte. Dit is het resultaat:

Dit is hetzelfde voor hoogte. Stel dat u de hoogte van een header naar een vaste waarde van 200px.

koptekst {
hoogte: 200px;
weergave: rooster;
plaats-items: centrum;
}

Dit centreert alles perfect in de koptekst. Maar wanneer u het browservenster verkleint, stroomt de inhoud uiteindelijk uit de container. En dit komt omdat je een vaste hoogte instelt op de header.

Over het algemeen, hoogte En breedte zijn beide gevaarlijke eigenschappen. De oplossing is om de aanpasbare hoogte en breedte te gebruiken, d.w.z. min- En maximale hoogte, En min- En Maximale wijdte. Als de browser in deze gevallen situaties tegenkomt waarin de inhoud langer wordt, zal de koptekst groeien om zich daaraan aan te passen.

Dit is een van de meest voorkomende CSS-fouten die u moet vermijden.

3. Onthoud dat uw website standaard responsief is

Houd er rekening mee dat uw website al reageert voordat u ook maar één regel CSS-code schrijft. Deze mentaliteit kan u helpen voorkomen dat het ontwerpproces te ingewikkeld wordt. De lay-out gaat werken op grote schermen en kleine schermen. Het is misschien niet mooi. Het is misschien zelfs moeilijk te lezen op grote schermen. Maar de website past zich aan de viewport aan, ongeacht de grootte.

Natuurlijk kunnen de afbeeldingen overlopen en is de tekst mogelijk te klein. Maar je gaat niets verliezen met de standaardlay-out. Uw tekst zal niet breken en alle elementen zullen zichtbaar zijn op het scherm.

Het begrijpen en omarmen van dit feit kan echt helpen bij het schrijven van uw CSS-code. Wanneer u problemen tegenkomt, weet u zeker dat de fout voortkomt uit de CSS die u hebt geschreven. Dit maakt het gemakkelijker om het probleem te vinden en op te lossen.

Probeer alleen mediaquery's te gebruiken om complexiteit toe te voegen. Bijvoorbeeld wanneer u wilt dat uw lay-out drie kolommen heeft op grotere schermen. Gebruik ze anders niet. Lees onze voor meer informatie over mediavragen gids voor mediaquery's.

Hier is één scenario. Stel je voor dat het element met een klassennaam van .splitsen heeft drie elementen erin. Met de volgende CSS wordt een lay-out met drie kolommen gemaakt:

.splitsen {
weergave: buigen;
flex-richting: rij;
gat: 2rem;
}

Op kleinere schermen (40em breed of minder), zou je willen dat alles een enkele kolom beslaat. Dus je zou dit doen:

@media(Maximale wijdte: 40em) {
.splitsen {
weergave: blok;
 }
}

Hier negeert u de standaarduitlijning (drie kolommen). Maar de mediaquery is niet nodig omdat de browser gebruikt weergave: blok standaard. U hoeft het dus niet expliciet te definiëren.

Met dat in gedachten zou je je code kunnen refactoren om een ​​enkele mediaquery te gebruiken die alleen van toepassing is op grote schermen. Daar schakel je over naar drie kolommen wanneer het scherm breder is dan 40em:

@media(Maximale wijdte: 40em) {
.splitsen {
weergave: buigen;
flex-richting: rij;
gat: 2rem;
 }
}

Op kleine schermen stapelt de browser alles in één kolom. Maar u hoeft het niet op te geven omdat de browser gebruikt weergave: blok standaard. U hebt dus alleen mediaquery's gebruikt om complexiteit toe te voegen.

Dus in plaats van de complexiteit toe te voegen en vervolgens een aantal eigenschappen te moeten overschrijven, voegt u nu de complexiteit toe wanneer u die nodig had. Meestal heb je alleen nodig min-breedte mediavragen. Begin met mobile-first, en als de site er goed uitziet op mobiel, voeg dan de complexiteit (bijv. kolommen) toe voor de desktopversie.

5. Profiteer van moderne CSS

Door moderne CSS-benaderingen te gebruiken, kunt u de meeste uitlijningsproblemen en breekpunten achterwege laten en naar een intrinsiek ontwerp toewerken.

Een manier om dat te doen is:

h1 { lettergrootte: klem (3rem, 1rem + 10vw, 7rem)}

Dit klemt de h1 tussen een minimale en maximale lettergrootte. De kleinste waar we naartoe willen is 3rem en de hoogste is 7rem. Het midden is wat we herhalen (1 rem + 10 vw). Als gevolg hiervan wordt de titel automatisch kleiner naarmate de viewport kleiner wordt en groter naarmate deze groter wordt.

Meer informatie over moderne CSS

CSS is in de loop der jaren enorm geëvolueerd. Tegenwoordig hebben we nieuwere en betere benaderingen voor het positioneren van elementen in CSS. In dit artikel hebben we enkele van deze praktijken besproken en benadrukt hoe ze u kunnen helpen veelvoorkomende ontwerpvalkuilen te vermijden. Een van de beste manieren om moderne CSS te leren is via een praktische benadering, zoals het gebruik van moderne CSS om een ​​HTML-tabel te ontwerpen.