Home-theater-designers
Als u websites/webapplicaties wilt ontwikkelen, is het essentieel om te weten hoe u responsieve ontwerpen kunt maken voor uw succes.
In het verleden was het maken van websites die zich goed aanpasten aan verschillende schermformaten een luxe die website-eigenaren van een ontwikkelaar moesten vragen. Door de toename van 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 twijfel de beste manier om ervoor te zorgen dat uw website/webapp op elk apparaat precies zo wordt weergegeven als u wilt.
Responsief ontwerp begrijpen
In een notendop, responsive design gaat over het gebruik van HTML/CSS om een website/webapp-layout 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
Wat zijn mediaquery's?
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 (liggende of staande modus).
Lees meer: De essentiële CSS3-eigenschappen Cheatsheet
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 u voor een bedrijf werkt met honderden verschillende webpagina's, zal dit een enorme tijdbesparing blijken te zijn.
Mediaquery's gebruiken
Er zijn verschillende dingen waar je rekening mee moet houden bij het gebruik van mediaquery's: structuur, plaatsing, bereik en koppeling.
De structuur van mediaquery's
Voorbeeld van een mediaquerystructuur
@media only/not media-type and (expression){
/*CSS code*/
}De algemene structuur van een mediaquery omvat:
- Het trefwoord @media
- Het niet/enige sleutelwoord
- Een mediatype (dit kan scherm, print of spraak zijn)
- Het sleutelwoord en
- Een unieke uitdrukking tussen haakjes
- CSS-code ingesloten in een paar open en gesloten accolades.
Verwant: CSS gebruiken om documenten op te maken voor afdrukken
Voorbeeld van een mediaquery met het enige trefwoord
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}In het bovenstaande voorbeeld wordt CSS-styling (met name een blauwe achtergrondkleur) alleen toegepast op apparaatschermen met een breedte van 450 px en minder, dus eigenlijk smartphones. Het enige trefwoord kan worden vervangen door het trefwoord not en dan is CSS-styling in de bovenstaande mediaquery alleen van toepassing op print en spraak.
Standaard is echter een algemene mediaquerydeclaratie van toepassing op alle drie de mediatypes, dus het is niet nodig om een mediatype te specificeren, tenzij het doel is om een of meer van hen uit te sluiten.
Voorbeeld van standaard mediaquery
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}De plaatsing van mediaquery's
Een mediaquery is een CSS-eigenschap; het kan daarom alleen worden gebruikt binnen de stylingtaal. Er zijn drie verschillende manieren om CSS in uw code op te nemen; slechts twee van deze methoden bieden echter een praktische manier om mediaquery's in uw programma's op te nemen: interne of externe CSS.
De interne methode omvat het toevoegen van de tag aan de tag van het HTML-bestand en het maken van de mediaquery binnen de parameters van de tag.
De externe methode houdt in dat u een mediaquery maakt in een extern CSS-bestand en deze via de tag aan uw HTML-bestand koppelt.
Het bereik van mediaquery's
Of mediaquery's nu worden gebruikt via interne of externe CSS, er is één belangrijk aspect van de stijltaal dat de werking van een mediaquery negatief kan beïnvloeden. CSS heeft een rangorderegel. Bij gebruik van een CSS-selector, of in dit geval een mediaquery, heeft elke nieuwe mediaquery die aan het CSS-bestand wordt toegevoegd, voorrang op (of heeft voorrang op) de vorige.
De standaard mediaquery-code die we hierboven hebben, is gericht op smartphones (450px breed en minder), dus als u een andere achtergrond voor tablets wilt instellen, denkt u misschien dat u eenvoudig de volgende code aan uw reeds bestaande CSS-bestand kunt toevoegen.
Voorbeeld van vraag naar tabletmedia
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Het enige probleem is dat, vanwege de rangorde, tablets een rode achtergrondkleur zouden hebben en smartphones nu ook een rode achtergrondkleur omdat 450px en lager onder de 800px is.
Een manier om dit kleine probleem op te lossen zou zijn om de mediaquery voor tablets toe te voegen voor die voor smartphones; de laatste zou de eerste overschrijven 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 realiseren zonder dat u zich zorgen hoeft te maken over de volgorde van prioriteit. Dit is een functie van mediaquery's die bekend staat als bereikspecificatie, waarbij de ontwikkelaar een mediaquery kan maken met de maximale en minimale breedte (het bereik).
Tablet mediaquery met bereik Voorbeeld
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
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 van breedte.
Mediaquery's koppelen
Als u geen mediaquery's in uw CSS-code wilt insluiten, is er een alternatieve methode die u kunt gebruiken. Deze methode omvat het gebruik van mediaquery's in de tag van een HTML-bestand, dus in plaats van één enorm stylesheet met de stijlvoorkeuren voor smartphones, tablets en computers, kunt u drie afzonderlijke CSS-bestanden gebruiken en uw mediaquery's in de tag maken.
De tag is een HTML-element dat wordt gebruikt om CSS-styling van een externe stylesheet te importeren. Deze tag heeft een media-eigenschap die op dezelfde manier werkt als een mediaquery in CSS.
Mediaquery's gebruiken in het voorbeeld van de koppelingstag
href='tablet.css'>
De bovenstaande code moet in de tag van uw HTML-bestand worden geplaatst. Nu hoef je 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 je voor elk apparaat wilt 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.
hoe sim te repareren die niet is ingericht?
Nu heb je de tools om responsieve ontwerpen te maken
Als je het einde van dit artikel hebt gehaald, heb je geleerd 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.
Afbeelding tegoed: negatieve ruimte / Pexels
Deel Deel Tweeten E-mail Een achtergrondafbeelding instellen in CSSCSS is een krachtig hulpmiddel voor het opmaken van webpagina's. Door te leren hoe je een achtergrondafbeelding plaatst, leer je veel basisprincipes van CSS.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webontwikkeling
- Webdesign
- CSS
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke technologiebeginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Meer van Kadeisha KeanAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren