Mediaquery's in HTML en CSS gebruiken om responsieve websites te maken

Als u websites / webapplicaties wilt ontwikkelen, is het essentieel voor uw succes om te weten hoe u responsieve ontwerpen kunt maken.

In het verleden was het maken van websites die zich goed aanpasten aan verschillende schermformaten een luxe die website-eigenaren moesten aanvragen bij een ontwikkelaar. Door de opkomst in het gebruik van smartphones en tablets is responsive design nu echter een noodzaak geworden in de wereld van softwareontwikkeling.

Het gebruik van mediaquery's is zonder meer de beste manier om ervoor te zorgen dat uw website / web-app precies wordt weergegeven zoals u dat wilt op elk apparaat.

Responsive Design begrijpen

In een notendop: responsive design gaat over het gebruik van HTML / CSS om een ​​website / webapp-indeling te maken die zich aanpast aan verschillende schermformaten. In HTML / CSS zijn er een paar verschillende manieren om responsiviteit in een website-ontwerp te bereiken:

• Rem- en em-eenheden gebruiken in plaats van pixels (px)
• De viewport / schaal van elke webpagina instellen
• Mediaquery's gebruiken

Een mediaquery is een functie van CSS die is uitgebracht in de CSS3-versie. Met de introductie van deze nieuwe functie krijgen gebruikers van CSS de mogelijkheid om de weergave van een webpagina aan te passen op basis van de hoogte, breedte en oriëntatie van een apparaat / scherm (landschaps- of portretmodus).

Lees verder: De Essential CSS3 Properties Cheat Sheet

Mediaquery's bieden een raamwerk om code één keer te maken en deze meerdere keren in uw programma te gebruiken. Dit lijkt misschien niet zo handig als u een website ontwikkelt met slechts drie webpagina's, maar als je werkt voor een bedrijf met honderden verschillende webpagina's - dit zal een enorme tijd blijken te zijn spaarder.

Er zijn verschillende dingen waarmee u rekening moet houden bij het gebruik van mediaquery's: structuur, plaatsing, bereik en koppeling.

Alleen @media / niet mediatype en (expressie) {
/ * CSS-code * /
}

De algemene structuur van een mediaquery omvat:

• Het @ media-trefwoord
• Het niet / enige trefwoord
• Een mediatype (dit kan scherm, print of spraak zijn)
• Het zoekwoord ‘en’
• Een unieke uitdrukking tussen haakjes
• CSS-code ingesloten in een paar open en dicht accolades.

Verwant: CSS gebruiken om documenten op te maken voor afdrukken

Alleen @media-scherm en (max-breedte: 450px) {
lichaam{
achtergrondkleur: blauw;
}
}

In het bovenstaande voorbeeld wordt CSS-stijl (met name een blauwe achtergrondkleur) toegepast op alleen apparaatschermen met een breedte van 450 px en minder, dus in feite smartphones. Het "enige" trefwoord kan worden vervangen door het "niet" trefwoord en dan is CSS-stijl in de mediaquery hierboven alleen van toepassing op print en spraak.

Standaard is echter een algemene verklaring van mediaquery's van toepassing op alle drie de mediatypen, dus het is niet nodig om een ​​mediatype te specificeren, tenzij het de bedoeling is om een ​​of meer ervan uit te sluiten.

/ * ontwerp voor smartphones * /
@media (max-breedte: 450 px) {
lichaam{
achtergrondkleur: blauw;
}
}

Een mediaquery is een CSS-eigenschap; het kan daarom alleen binnen de stijltaal worden gebruikt. Er zijn drie verschillende manieren om CSS in uw code op te nemen; Er zijn echter slechts twee van deze methoden die een praktische manier bieden om mediaquery's in uw programma's op te nemen: interne of externe CSS.

De interne methode omvat het toevoegen van de

De externe methode omvat het maken van een mediaquery in een extern CSS-bestand en deze te koppelen aan uw HTML-bestand via de label.

Of mediaquery's nu worden gebruikt via interne of externe CSS, er is één belangrijk aspect van de stijltaal dat een negatieve invloed kan hebben op hoe een mediaquery functioneert. CSS heeft een regel voor prioriteitsvolgorde. Bij gebruik van een CSS-kiezer, of in dit geval een mediaquery, elke nieuwe mediaquery die aan het CSS-bestand wordt toegevoegd, overschrijft (of heeft voorrang op) de vorige.

De standaard mediaquerycode die we hierboven hebben, is bedoeld voor smartphones (450 px breed en minder), dus als je een andere achtergrond voor tablets, denk je misschien dat je gewoon de volgende code aan je reeds bestaande CSS-bestand kunt toevoegen.

/ * ontwerp voor tablets * /
@media (max-breedte: 800px) {
lichaam{
achtergrondkleur: rood;
}
}

Het enige probleem is dat tablets, vanwege de rangorde, een rode achtergrondkleur zouden hebben en smartphones nu ook een rode achtergrondkleur omdat 450px en minder kleiner is dan 800px.

Een manier om dit kleine probleem op te lossen, is door de mediaquery voor tablets toe te voegen aan die voor smartphones; de laatste zou de eerste vervangen en je zou nu smartphones hebben met een blauwe achtergrondkleur en tablets met een rode achtergrondkleur.

Er is echter een betere manier om een ​​aparte styling voor smartphones en tablets te bereiken zonder u zorgen te hoeven maken over de volgorde van prioriteit. Dit is een functie van mediaquery's die bereikspecificatie wordt genoemd, waarbij de ontwikkelaar een mediaquery kan maken met de maximale en minimale breedte (het bereik).

/ * ontwerp voor tablets * /
@media (max-breedte: 800px) en (min-breedte: 451) {
lichaam{
achtergrondkleur: rood;
}
}

Met het bovenstaande voorbeeld wordt de plaatsing van mediaquery's in een stylesheet irrelevant, aangezien het ontwerp voor tablets en smartphones gericht is op twee afzonderlijke collecties met een breedte.

Als u geen mediaquery's in uw CSS-code wilt insluiten, is er een alternatieve methode die u kunt gebruiken. Bij deze methode worden mediaquery's gebruikt in het tag van een HTML-bestand, dus in plaats van één enorm stylesheet te hebben die de stijlvoorkeuren voor bevat smartphones, tablets en computers - u kunt drie afzonderlijke CSS-bestanden gebruiken en uw mediaquery's maken in de label.

De tag is een HTML-element dat wordt gebruikt om CSS-opmaak uit een extern stylesheet te importeren. Deze tag heeft een media-eigenschap die op dezelfde manier werkt als een mediaquery in CSS.

 hoofdstijlblad 

 tablet stylesheet 
href = "tablet.css">
 smartphone-stylesheet 

De bovenstaande code moet in de

tag van uw HTML-bestand. Nu hoeft u alleen nog maar drie afzonderlijke CSS-bestanden te maken met de bestandsnamen main.css, tablet.css en smartphone.css - en vervolgens het specifieke ontwerp te maken dat u voor elk apparaat zou willen hebben.

De stijl in het hoofdbestand is van toepassing op alle schermen met een breedte groter dan 800px, de stijl in het tabletbestand is van toepassing op alle schermen met een breedte tussen 450px en 801px, en de stijl in het smartphonebestand is van toepassing op alle onderstaande schermen 451px.

Als je het einde van dit artikel hebt gehaald, heb je kunnen leren wat responsive design is en waarom het nuttig is. U kunt nu mediaquery's in CSS- en HTML-bestanden identificeren en gebruiken. Bovendien maakte u kennis met de volgorde van prioriteit in CSS en zag u hoe dit van invloed kan zijn op hoe uw mediaquery's werken.

Image Credit: Negative Space /Pexels

Een achtergrondafbeelding instellen in CSS

CSS is een krachtig hulpmiddel voor het stylen van webpagina's. Door te leren hoe je een achtergrondafbeelding plaatst, leer je veel CSS-basisprincipes.

Lees Volgende

Over de auteur