Wat Is Responsive Webdesign?
Moderne webontwikkeling is ondenkbaar zonder adaptieve/responsieve ontwerpen. Dit stelt gebruikers in staat om webbronnen op elk apparaat gelijkwaardig te gebruiken: een smartphone, een tablet, een desktop of een tv.
Hoe werkt het?
- Het ontwikkelingsteam bepaalt hoe elk element eruitziet afhankelijk van de schermgrootte;
- De benodigde instructies worden aan de code toegevoegd;
- De browser volgt de wijzigingen van het viewport;
- De browser past de regels toe die het ontwikkelingsteam in de code heeft vastgelegd.
Media-queries
Media-query maakt adaptieve/responsieve ontwerpen mogelijk. Met behulp van deze queries kunnen ontwikkelaars de stijlen van elk element instellen afhankelijk van de schermgrootte.
Opmerking
Een media-query kan worden gezien als instructies: "Als het scherm van de gebruiker een desktop is, pas dan deze stijlen toe op het element. Als het scherm van de gebruiker een smartphone is, pas dan andere stijlen toe op het element. Enzovoort.".
De basis-syntaxis van de media-query is als volgt:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>
- geeft het type apparaat aan. Mogelijke waarden:all
- standaardwaarde. Als er niets is opgegeven, geldt de media-regel voor alle apparaten;print
- de media-regel geldt voor apparaten die afdrukbare documenten produceren, zoals printers;screen
- de media-regel geldt voor alle apparaten met een fysiek scherm.
<media_feature>
- geeft apparaatkenmerken aan. Meest gebruikelijke toepassingen:min-width:
- de minimale breedte van het viewport;max-width:
- de maximale breedte van het viewport.
<operator>
- media-type en media-feature worden gescheiden door de optionele logische operator. De waarden kunnen zijn:and
of,
.
Opmerking
In de volgende hoofdstukken behandelen we het gebruik van media-queries in de praktijk.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Wat Is Responsive Webdesign?
Veeg om het menu te tonen
Moderne webontwikkeling is ondenkbaar zonder adaptieve/responsieve ontwerpen. Dit stelt gebruikers in staat om webbronnen op elk apparaat gelijkwaardig te gebruiken: een smartphone, een tablet, een desktop of een tv.
Hoe werkt het?
- Het ontwikkelingsteam bepaalt hoe elk element eruitziet afhankelijk van de schermgrootte;
- De benodigde instructies worden aan de code toegevoegd;
- De browser volgt de wijzigingen van het viewport;
- De browser past de regels toe die het ontwikkelingsteam in de code heeft vastgelegd.
Media-queries
Media-query maakt adaptieve/responsieve ontwerpen mogelijk. Met behulp van deze queries kunnen ontwikkelaars de stijlen van elk element instellen afhankelijk van de schermgrootte.
Opmerking
Een media-query kan worden gezien als instructies: "Als het scherm van de gebruiker een desktop is, pas dan deze stijlen toe op het element. Als het scherm van de gebruiker een smartphone is, pas dan andere stijlen toe op het element. Enzovoort.".
De basis-syntaxis van de media-query is als volgt:
@media <media_type> <operator> (<media_feature>) {
/* CSS rules */
}
<media_type>
- geeft het type apparaat aan. Mogelijke waarden:all
- standaardwaarde. Als er niets is opgegeven, geldt de media-regel voor alle apparaten;print
- de media-regel geldt voor apparaten die afdrukbare documenten produceren, zoals printers;screen
- de media-regel geldt voor alle apparaten met een fysiek scherm.
<media_feature>
- geeft apparaatkenmerken aan. Meest gebruikelijke toepassingen:min-width:
- de minimale breedte van het viewport;max-width:
- de maximale breedte van het viewport.
<operator>
- media-type en media-feature worden gescheiden door de optionele logische operator. De waarden kunnen zijn:and
of,
.
Opmerking
In de volgende hoofdstukken behandelen we het gebruik van media-queries in de praktijk.
Bedankt voor je feedback!