Op uw verzoek zal dit artikel het volgende behandelen: Media Query's, wat betekent dat er gebruik wordt gemaakt van Mediatypen samen met een of meer expressies over de kenmerken van een medium om de opmaak voor verschillende apparaten te definiëren. Browsers of applicaties lezen de expressies die in de Vraagen als het betreffende apparaat aan die voorwaarden voldoet, wordt de overeenkomstige CSS wordt toegepast.
Mediatypen specificeren voor welk type media een bepaald CSS-blok bedoeld is. HTML is ontworpen om draagbaar te zijn, dat wil zeggen, om door elk apparaat gelezen en geïnterpreteerd te kunnen worden. Elk apparaat geeft HTML echter anders weer, afhankelijk van factoren zoals schermafmetingen (bijvoorbeeld "oplossing”). Het openen van een site vanaf een desktop verloopt bijvoorbeeld niet op dezelfde manier als het openen ervan vanaf een mobiel apparaat, omdat dit verschillende apparaten zijn met verschillende browse-contexten.
De uitdaging met Media Queries is tegenwoordig dat er steeds meer apparaten op de markt komen met verschillende schermformaten en hardwaremogelijkheden die vergelijkbaar zijn met die van desktops, waardoor ze bijna net zo browsen als desktopmachines. Neem de iPhone X Bijvoorbeeld: de weergavekwaliteit is uitstekend en de browser geeft pagina's weer zoals een typische desktopbrowser.
In dat geval is het niet nodig om een lay-out en CSS specifiek voor te bereiden draagbaar mediatypen op de iPhone – want hoewel het een handheld is, gedraagt het zich er niet als een. Toch gedraagt het zich ook niet precies als een desktop. Hoewel Safari's rendering engine identiek is aan de desktopversie, verschillen het gedrag en de navigatiepatronen van de gebruiker nog steeds. We komen op een middenweg terecht: we kunnen geen volledig aparte CSS voor handhelds bieden, noch kunnen we uitsluitend vertrouwen op een desktop (scherm) stijlblad.
Hieronder ziet u hoe u definieert welke stylesheetregels moeten worden geladen:
<style>
@media scherm en (max-breedte:1024px) {
.kleine resolutie { weergave: geen; }
}
.kleine resolutie { weergave: blok; }
</style>
Optioneel kunt u een aparte .css bestand en host het op uw eigen server of via de CDN-oplossing van mijn startup, Blenner SmartCDNVoeg het vervolgens toe aan de metadata-sectie van uw HTML, zoals hier:
<link rel=”stylesheet” href=”URL_OF_YOUR_CSS_FILE”>
Zodra je CSS-bestand klaar is, roep je de klasse simpelweg aan op de plek waar je het responsieve gedrag nodig hebt. Om het bijvoorbeeld toe te passen op een afbeelding die is ingepakt in een aangepaste tag met de naam "C", doe je het volgende:
<c class=”small-resolution”>
<img src="”IMAGE_URL”" alt=""BESCHRIJVING"" id="”OPTIONAL_ADDITIONAL_ID”">
</c>
Ik hoop dat dit helpt! 😀
Laat hieronder uw reactie achter en deel het met uw vrienden!
