Responsive design met mediaqueries (min-width)

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Uitleg van flexbox

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Open de bestanden uit de local root folder css--.

Ga naar Bestand > Open map.

Zorg dat de map css-- geopend wordt.

Open dan het bestand index-.html en index-.css.

Met deze bestanden gaan we in dit hoofdstuk aan het werk.

Er staan al heel wat stijlen beschreven in dit stijlblad.

Bestudeer deze eerst zodat je begrijpt waarvoor deze dienen.

We gaan nu deze pagina responsive maken voor verschillende beeldschermformaten.

Dit is het resultaat van de lessen uit het vorige hoofdstuk.

Met het css-grid hebben we een layout gemaakt van drie kolommen.

Ik wil nu juist eerst starten met de layout van het kleinste schermformaat, mobile-first dus.

Je start dan bovenin het stijlblad met de meest minimale versie van de layout.

Dat is de versie voor een mobieltje.

En hier zet ik de layout volledig onder elkaar in een éénkoloms layout.

Vanaf dat punt kan een scherm alleen nog maar groter worden.

Daarom plaats ik onderaan de huidige css-stijlen de mediaquerie voor het eerstvolgende schermformaat.

Aangezien deze al heel aardig in de buurt komt van wat ik dan wil.

Ga ik deze css-selector met de stijlopdrachten kopiëren.

Loop ik helemaal naar beneden. Hier schrijf ik eerst de mediaquerie.

En dat doe je met @media screen and (min-width:pixels)

Accolade openen, voer dan een aantal lege regels in, accolade sluiten.

Tussen de accolades plaats ik dan de css-opdrachten die voor deze schermbreedte gaan gelden.

Eerste wat ik doe is de zojuist gekopieerde selector van boven, plakken hier beneden.

Dit wordt de driekoloms.

Op zich hoef ik de eigenschap display met waarde grid, niet nogmaals te herhalen.

Immers deze staat hierboven al beschreven en die wordt gewoon keurig overgeërfd.

Hier moeten we nu een éénkoloms van maken.

Daarvoor haal ik twee fractions weg en houd ik er eentje over.

Daarna moet ik zorgen dat er per regel maar één element kan komen te staan.

De "aside-t" knip ik weg, want die heb ik nog even nodig.

Na de "main" volgt namelijk de eerste aside.

Daarna de tweede "aside" en ook de footer wordt teruggebracht tot één.

Ik bewaar mijn document en bekijk het resultaat alvast in de browser.

Zodra je het scherm groter smaller maakt dan pixels.

Moet de éénkoloms vormgeving getoond worden. En jawel hoor!

Alle griditems staan nu onder elkaar in één kolom.

Dit is nu de standaard geworden.

Zodra je het scherm breder maakt dan pixels.

Dan gaat de layout van de bijbehorende mediaquerie gelden.

Kijk! Nu wordt het een driekoloms. Geweldig!

En ook nog eens erg makkelijk.

Er is nog wel een dingetje waar ik vanaf wil.

Zie je de witruimte waardoor de pagina afstand houdt ten opzichte van de browserrand.

Deze opdracht heb ik helemaal bovenaam in mijn stijlblad aan de body gegeven.

Maar op het mobieltje wil ik juist de volledige breedte benutten.

Dus deze margin-opdracht knip ik hier weg.

Kijk dat ziet er al een stuk beter uit in de browser.

Zodra het scherm nu weer groter wordt dan zeshonderd pixels.

Zou die afstand wel welkom zijn.

Dan plaats ik helemaal onderaan bij de mediaquerie opnieuw een body-selector.

En hierin plak ik de margin van veertig pixels weer terug.

Kijk! Nu verschijnt deze margin enkel voor pagina's die breder zijn dan zeshonderd pixels.

Je kunt nu zelf nog een mediaquerie aanmaken voor als het scherm nog breder wordt.

Bijvoorbeeld negenhonderd pixels.

En opnieuw kun je bepalen hoe je dan de layout wilt.

Bepaal hoeveel kolommen en gebruik de gridareas om te bepalen wie waar komt in de layout.

Bij grotere beeldschermen wordt de site op zich vaak smaller gemaakt.

De pagina staat dan gecentreerd binnen de beschikbare ruimte.

Hiervoor kun je ook heel goed de margin gebruiken.

Je kunt de margin ook bepalen met twee waarden.

Met de eerste waarde bepaal je de afstand naar boven en beneden, die zet ik op nul.

Met de tweede waarde bepaal je de afstand naar links en rechts.

Die zet ik op tien procent.Dat hoeft geen vaste maateenheid te zijn.

Ik kan deze ook bijvoorbeeld op twintig procent zetten.

Of als ik dit teveel vindt, op tien procent.

En kijk! Een gecentreerde layout met gelijke afstanden naar links en naar rechts.

Die ook flexibel is als het venster groter wordt.

Mijn advies is om nu eerst te gaan experimenteren met het maken van responsive layouts...

Met behulp van mediaqueries.