Dit artikel demonstreert de stappen om een responsief website-ontwerp in HTML en CSS te maken met behulp van:
Hoe maak je een responsive website-ontwerp met HTML en CSS?
Het creëren van een responsief website-ontwerp met HTML en CSS omvat het bouwen van een lay-out die zich aanpast aan verschillende schermformaten en resoluties. Dit zijn de stappen die u kunt volgen om een responsief website-ontwerp te maken:
Stap 1: Viewport-metatag
De ' uitkijk postje ”metatag speelt een cruciale rol bij het maken van responsief webdesign. Het wordt ingevoegd in de '
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' / >
De bovenstaande metatag heeft twee kenmerken:
- De ' naam ” attribuut vertelt de naam van de functionaliteit waarvoor deze tag is gemaakt/gebruikt. Stel bijvoorbeeld de ' uitkijk postje ' naar de ' naam ” attribuut om met de viewport van verschillende apparaten om te gaan.
- De ' inhoud ” attribuut definieert de vorige attribuutwaarde. Het stelt de breedte van elk apparaat in en schaalt het document/de webpagina naar 100%.
Stap 2: responsieve afbeeldingen
Omdat de afbeeldingsgrootte van elkaar verschilt, is het daarom moeilijk om hetzelfde in te stellen ' hoogte ' of ' breedte ”-eigenschap voor elke afbeelding. Wanneer de grootte van de afbeelding vaststaat, wijzigen gebruikers de grootte van de webpagina-afbeelding niet met het scherm. Gebruikers kunnen de responsieve afbeelding echter instellen via de volgende code:
img {
max- breedte : 100 %;
}
De ' Maximale wijdte ” CSS-eigenschap beperkt de weergave van de afbeelding in de toegewezen ruimte. Door de waarde in te stellen in '%', wordt het formaat van de afbeelding aangepast samen met het formaat van het bovenliggende element. Dit creëert een responsief effect voor de afbeelding.
Stap 3: Flexbox-indeling
De lay-out van Flexbox wordt ten zeerste aanbevolen om een responsief website-ontwerp te maken. Hiermee kunnen de HTML-elementen op een bepaalde positie worden weergegeven en kan de beschikbare ruimte voor elk kind worden aangepast aan de grootte die beschikbaar is voor de bovenliggende div. De Flexbox-lay-out bevat verschillende eigenschappen die de ontwikkelaar veel vrijheid bieden, zoals in de onderstaande code:
< stijl >
.ouder {
weergeven: flex;
}
.kind {
buigen: 1 ;
tekst- uitlijnen : centrum;
}
< / stijl >
< lichaam >
< div klas = 'ouder' >
< div klas = 'kind' stijl = 'grens: 3px effen blauwviolet;' >Welkom< / div >
< div klas = 'kind' stijl = 'border: 3px effen donkergroen;' >naar< / div >
< div klas = 'kind' stijl = 'border: 3px effen rood;' >Linux< / div >
< / div >
< / lichaam >
In het bovenstaande codefragment:
- Maak eerst een bovenliggend div-element met een id van ' ouder ' binnen in de '
' label. - Maak vervolgens meerdere onderliggende div-elementen en wijs ze een klasse toe van ' kind ”.
- Selecteer vervolgens de ' ouder ' klasse en geef de waarde van ' buigen ” voor de CSS “ weergave ' eigendom.
- Geef daarna een waarde op van ' 1 ' naar de ' buigen 'Eigendom aan elk' kind ” klasse die ervoor zorgt dat het onderliggende element wordt weergegeven als een flex.
Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:
De bovenstaande uitvoer geeft aan dat het onderliggende element gelijke breedte krijgt wanneer de grootte van de browser wordt gewijzigd.
Stap 4: Rasterindeling
De rasterlay-out maakt een raster en wijst de HTML-elementen binnen het rastergedeelte toe. De rasterelementen veranderen ten opzichte van de schermgrootte van de webpagina. Het creëert een responsief ontwerp terwijl de grootte van het HTML-element verandert op basis van het apparaatscherm:
< stijl >.container {
weergave: raster;
raster-sjabloon-kolommen: 1fr 1fr 1fr;
}
< / stijl >
< lichaam >
< div klas = 'onderdeel' >
< div stijl = 'border: 3px effen bosgroen;' >Linux< / div >
< div stijl = 'border: 3px effen donkergroen;' >Linux< / div >
< div stijl = 'border: 3px effen rood;' >Linux< / div >
< / div >
< / lichaam >
In bovenstaande code:
- Maak eerst een bovenliggende div en wijs deze een klasse toe van ' bestanddeel ' binnen in de '
' label. Maak daarna drie onderliggende div-elementen erin. - Wijs vervolgens in het CSS-bestand een ' rooster ” waarde naar de “ weergave ” eigenschap voor de “ container ” div.
- Maak daarna drie delen van gelijke grootte op de webpagina met behulp van de ' raster-sjabloon-kolom ” eigenschap en stel deze gelijk aan “ 1fr 1fr 1fr ” waar fr betekent “ fractie ”.
Na het compileren van de bovenstaande code ziet de uitvoer er als volgt uit:
De uitvoer geeft aan dat de div's zichzelf aanpassen aan de schermgrootte met gelijke verhoudingen.
Stap 5: Mediavragen
Het gebruik van mediaquery's om responsief ontwerp te maken is iets ouderwets, maar toch gebruiken de meeste websites mediaquery's. De mediaquery's kunnen direct in het CSS-bestand worden toegevoegd nadat de standaardstijl voor het geselecteerde HTML-element is toegevoegd. De mediaquery maakt de code een beetje langer en rommelig. Omdat de ontwikkelaar voor elke schermgrootte afzonderlijk code moet invoegen.
Zie bijvoorbeeld het onderstaande codefragment:
@ media scherm en ( min- breedte : 640px ) {.component {
achtergrond- kleur : Bos Groen;
}
}
In het bovenstaande codefragment:
- Stel eerst de mediaquery in die CSS-eigenschappen toepast op de geselecteerde elementklasse ' bestanddeel ” wanneer de breedte van het scherm groter wordt dan “ 640px ”.
- Selecteer vervolgens de 'componentklasse en stel de waarde in van' Bos Groen ' voor de ' Achtergrond kleur ' eigendom.
.component {
achtergrond- kleur : dodgerblue;
}
}
Dan voor het bovenstaande codefragment:
- Stel de mediaquery in om stijlen toe te passen wanneer de breedte kleiner is dan ' 1000px ”.
- Selecteer nu de ' bestanddeel ' klasse en geef een waarde op van ' dodgerblauw ' voor de ' Achtergrond kleur ' eigendom:
Na het uitvoeren van de bovenstaande codefragmenten ziet de uitvoer er als volgt uit:
De uitvoer geeft aan dat de mediaquery de achtergrond verandert op basis van de schermgrootte. De lettergrootte, breedte, hoogte en andere CSS-eigenschappen kunnen ook worden toegepast door hetzelfde patroon te volgen.
De mogelijke breekpunten schermgroottes waarmee rekening moet worden gehouden bij het gebruik van de mediaquery's zijn:
- Voor ' klein ' schermgrootte, stel de breedte kleiner in dan ' 640px ”.
- Voor ' medium ' viewport schermgrootte, de breedte varieert tussen ' 641px ' En ' 1007px ”.
- Voor ' groot ' schermgrootte, stel de breedte in op ' 1008px ' of groter.
Conclusie
Om een responsief website-ontwerp te maken, moeten de ontwikkelaars de ' kijkvenster ” tag in de “