Skip to content

Latest commit

 

History

History

les5

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
images
images
 
 
README.md
README.md
 
 

README.md

Les 5

“A Pixel is Not a Pixel”


Inhoudsopgave




Responsive design

  • meta-viewport
  • Werken met absolute en relatieve units
  • Media queries
  • Flex row naar flex column

Meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1" />

Absolute en relatieve units

Hieronder vind je de tabel met de meestgebruikte units.

Naam unit Type Omschrijving Voorbeeld
px Absoluut Hiermee bepaal je exact hoeveel pixels op je scherm er gebruikt moeten worden.
⚠️ Gebruik alleen px wanneer geen van onderstaande volstaat.		 width: 200px;
% Relatief Hiermee wordt de waarde bepaald op basis van de breedte of hoogte van de parent. width: 100%;
vw Relatief Hiermee wordt de waarde bepaald op basis van de breedte van de viewport (het zichtbare deel van de browser). width: 50vw;
vh Relatief Hiermee wordt de waarde bepaald op basis van de hoogte van de viewport (het zichtbare deel van de browser). height: 100vh;
rem Relatief Hiermee wordt de waarde bepaald op basis van de root font-size, oftewel de font-size die op de <html> staat ingesteld. Gebruik voor font-size altijd rem. font-size: 1.5rem;
em Relatief Hiermee wordt de waarde bepaald op basis van de font-size van het parent-element.
⚠️ Gebruik liever rem dan em omdat die makkelijker te gebruiken is.		 font-size: 2em;

De vraag die je jezelf iedere keer weer moet stellen is:

Op basis van wat moet ik de grootte bepalen?

  • Stel je wilt de width van een section instellen. Moet deze dan relatief zijn aan de parent (%) of aan het hele scherm (vw)?
  • Of je wilt de height van de header instellen. Moet deze dan relatief zijn aan de hoogte van het scherm (vh) of moet deze altijd hetzelfde zijn op ieder scherm (px)?

Door deze vragen te beantwoorden, kun je de juiste CSS units kiezen en ervoor zorgen dat je ontwerp zowel flexibel als consistent is op verschillende apparaten en schermformaten. Experimenteer met verschillende units om te begrijpen hoe ze zich gedragen in verschillende situaties en kies de meest geschikte unit voor elke specifieke toepassing.

Kijk voor voorbeelden hiervan terug naar het hoofdstuk hierover in les 2.


Box sizing

Bij het bepalen van de afmetingen van je elementen kan het verwarrend zijn dat de border en padding niet automatisch worden meegenomen in de berekening. Dit kan je corrigeren met:

* {
    box-sizing:border-box;
}

Calc

Met calc kan je een relatieve unit combineren met een absolute unit. Deze header krijgt als hoogte de helft van het scherm, min 20 pixels.

header {
    height: calc(50vh - 20px);
}

Media queries

Schermafmetingen

@media (max-width: 1000px) {}
@media (min-width: 250px) {}
@media (width >= 600px) {}
@media (width <= 400px) {}
@media (400px <= width <= 1000px) {}

Andere eigenschappen

@media (orientation: portrait) {}
@media (prefers-color-scheme: dark) {}
@media (prefers-reduced-motion) {}
@media (min-width: 600px) and (orientation: landscape) {}

Flex columns

.nav {
  display:flex;
  flex-direction:row;
}
@media (orientation: portrait) {
    .nav {
        flex-direction:column;
    }
}




Afbeeldingen

Formaten

  • Afbeelding formaten zijn: webp, png, jpg, gif, svg.
  • .png en .webp zijn lossless waardoor de kwaliteit hoog blijft. Ook kan je transparatie toevoegen.
  • .jpg is goed voor foto's, maar niet voor scherpe logo's, iconen en tekst, door de hoge compressie.
  • .gif is for the memes maar is eigenlijk erg verouderd. Je hebt weinig kleuren en het bestand wordt heel groot. Animaties kan je beter in .mp4 of .webp plaatsen.
  • .svg is een vector formaat, dus schaalbaar zonder kwaliteitsverlies. Dit is handig voor logo's en iconen.
  • Gebruik lazy loading om niet alle afbeeldingen tegelijk in te laden.

Schalen

  • Afbeeldingen in je images folder hebben vaak niet dezelfde verhouding.
  • Door in je css alleen de hoogte of breedte aan te passen blijft de verhouding correct, maar je document kan er rommelig uit gaan zien.
  • Images plaats je meestal in een container. De image afmeting is 100% van de container. De maat van de container bepaal je met flex.
  • Aspect-ratio
  • Werken met object-fit
  • Werken met achtergrondafbeeldingen
  • Werken met DPI waarden: srcset
  • Werken met picture

Object fit

Object fit gebruik je om een afbeelding altijd binnen zijn container te laten passen, zonder dat de verhouding vertekend raakt. object-fit:cover betekent dat er randen van de zijkant weg mogen vallen om de afbeelding passend te maken. object-fit:contain betekent dat er witruimte toegevoegd mag worden om de afbeelding passend te maken.

In dit voorbeeld staat de afbeelding in een div. Dit is vaak het meest praktisch, omdat de div al een afmeting toegewezen krijgt door je flex instellingen. De afbeelding wordt dan zo groot als die div.

HTML

<div>
  <img src="./robot.webp" loading="lazy" alt="a silly robot"/>
<div>

CSS

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Standaard wordt het midden van de afbeelding getoond, maar stel, het hoofdonderwerp staat ergens anders op de afbeelding, bijvoorbeeld onderaan, dan kan je met object-position de gewenste positie bepalen: CSS

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

Achtergrondafbeeldingen

Het voordeel van een achtergrondafbeelding is dat je er nog content overheen kan zetten. Dit leent zich goed voor HERO / Header elementen. Let op dat een leeg element van zichzelf geen hoogte / breedte heeft, dus dit moet je via CSS instellen.

HTML

<header><header>

CSS

header {
  width: 50vw;
  height: 30vh;
  background-image:url(../images/background.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Expert: Afbeeldingen aanpassen voor device

Verschillende DPI waarden

Met srcset kan je voor hogere DPI schemen een scherpere / grotere afbeelding inladen. 2x betekent een retina scherm.

<img srcset="robot-320pixels.jpg, robot-640pixels.jpg 2x" alt="a silly robot" />

Werken met picture

Met het picture element kan je kiezen om voor verschillende schermen (landscape, portrait) een hele andere afbeelding te laden. In dit voorbeeld zien we een portret op kleine schermen en een overview op grote schermen.

<picture>
  <source media="(max-width: 799px)" srcset="robot-480-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="robot-800-landscape.jpg" />
</picture>



Links



Opdracht: Foodblog responsive

Hieronder staat het eindresultaat op mobile én op desktop wat je moet zien te bereiken. In de startcode werkt veel al op desktop, maar nog niet alles klopt én ook niet alles is al optimaal ingesteld, waardoor het op kleinere schermen nog niet overeenkomt met het eindresultaat wat je hieronder ziet. Zorg er dus voor dat je tot onderstaand eindresultaat komt. Hou voor mobile een maximale breedte van 480px aan, dus stel daar je media-queries op in.

Let erop dat de headings op mobile iets kleiner zijn dan op desktop, dus bedenk een slimme manier om dit gemakkelijk aan te passen, zodat je niet iedere heading los hoeft in te stellen op mobile.


Aangezien je op een touchscreen geen hover-state hebt, betekent het handje in onderstaand eindresultaat een tap, dus dat je erop drukt.

Eindresultaat mobile

Opdracht 1

Eindresultaat desktop

Opdracht 1