Denne artikel demonstrerer trinene til at skabe et responsivt webstedsdesign i HTML og CSS ved hjælp af:
Hvordan laver man et responsivt webstedsdesign med HTML og CSS?
At skabe et responsivt webstedsdesign med HTML og CSS involverer at bygge et layout, der tilpasser sig forskellige skærmstørrelser og opløsninger. Her er de trin, du kan følge for at skabe et responsivt webstedsdesign:
Trin 1: Viewport Meta Tag
Det ' viewport ” Metatag spiller en afgørende rolle i skabelsen af responsivt webdesign. Det er indsat i '
< meta navn = 'udsigtsport' indhold = 'width=device-width,initial-scale=1' / >
Ovenstående metatag har to attributter:
- Det ' navn ” attribut fortæller navnet på den funktionalitet, som dette tag er oprettet/brugt til. Indstilling af f.eks. viewport ' til ' navn ” attribut til at håndtere visningsporten for forskellige enheder.
- Det ' indhold ” attribut definerer den forrige attributværdi. Den indstiller bredden på hver enhed og skalerer dokumentet/websiden til 100 %.
Trin 2: Responsive billeder
Da billedstørrelsen varierer fra hinanden, er det derfor svært at indstille den samme ' højde ' eller ' bredde ” ejendom for hvert billede. Når størrelsen på billedet er fast, ændrer brugerne ikke størrelsen på websidebilledet med skærmen. Brugere kan dog indstille det responsive billede via følgende kode:
img {
max- bredde : 100 %;
}
Det ' max-bredde ” CSS-egenskab begrænser billedet i at blive vist inden for dets tildelte plads. Ved at indstille værdien i '%', ændres størrelsen på billedet sammen med størrelsen på dets overordnede element. Dette skaber en responsiv effekt for billedet.
Trin 3: Flexbox Layout
Flexbox-layoutet kan varmt anbefales for at skabe et responsivt hjemmesidedesign. Det tillader HTML-elementerne at blive vist på en bestemt position og ændre størrelsen på den tilgængelige plads for hvert barn i overensstemmelse med den størrelse, der er tilgængelig af den overordnede div. Flexbox-layoutet indeholder flere egenskaber, som giver en masse frihed til udvikleren, såsom i nedenstående kode:
< stil >
.forælder {
display: flex;
}
.barn {
flex: 1 ;
tekst- justere : center;
}
< / stil >
< legeme >
< div klasse = 'forælder' >
< div klasse = 'barn' stil = 'kant: 3px solid blåviolet;' >Velkommen< / div >
< div klasse = 'barn' stil = 'kant: 3px fast mørkegrøn;' >til< / div >
< div klasse = 'barn' stil = 'kant: 3px fast rød;' >Linuxint< / div >
< / div >
< / legeme >
I ovenstående kodestykke:
- Først skal du oprette et overordnet div-element med et id på ' forælder ' inde i ' ” tag.
- Derefter skal du oprette flere underordnede div-elementer og tildele dem en klasse med ' barn ”.
- Vælg derefter ' forælder ' klasse og angive værdien af ' bøje ' til CSS ' Skærm ” ejendom.
- Angiv derefter en værdi på ' 1 ' til ' bøje ' ejendom til hver ' barn ” klasse, der får det underordnede element til at blive vist som et flex.
Efter at have udført ovenstående kode, ser websiden sådan ud:
Ovenstående output viser, at det underordnede element får samme bredde, når browserens størrelse ændres.
Trin 4: Gitterlayout
Gitterlayoutet opretter et gitter og tildeler HTML-elementerne inde i gitterdelen. Gitterelementerne ændres i forhold til skærmstørrelsen på websiden. Det skaber et responsivt design, efterhånden som HTML-elementets størrelse ændres i henhold til enhedens skærm:
< stil >.beholder {
display: gitter;
gitter-skabelon-kolonner: 1fr 1fr 1fr;
}
< / stil >
< legeme >
< div klasse = 'komponent' >
< div stil = 'border: 3px solid forestgreen;' >Linuxint< / div >
< div stil = 'kant: 3px fast mørkegrøn;' >Linuxint< / div >
< div stil = 'kant: 3px fast rød;' >Linuxint< / div >
< / div >
< / legeme >
I ovenstående kode:
- Først skal du oprette en overordnet div og tildele den en klasse på ' komponent ' inde i ' ” tag. Derefter skal du oprette tre underordnede div-elementer i den.
- Tildel derefter i CSS-filen en ' gitter ' værdi til ' Skærm ' ejendom for ' beholder ” div.
- Derefter skal du oprette tre lige store dele på websiden ved hjælp af ' gitter-skabelon-kolonne ' egenskab og sæt den lig med ' 1fr 1fr 1fr ' hvor fr betyder ' brøkdel ”.
Efter kompilering af ovenstående kode ser outputtet sådan ud:
Outputtet viser, at div'erne tilpasser sig selv i overensstemmelse med skærmstørrelsen med lige store proportioner.
Trin 5: Medieforespørgsler
Brugen af medieforespørgsler til at lave responsivt design er en slags gammeldags ting, men alligevel bruger de fleste websteder medieforespørgsler. Medieforespørgslerne kan tilføjes direkte i CSS-filen efter tilføjelse af standardstilen for det valgte HTML-element. Medieforespørgslen gør koden en lille smule længere og rodet. Fordi udvikleren skal indsætte kode for hver skærmstørrelse separat.
Se for eksempel nedenstående kodestykke:
@ medier skærm og ( min- bredde : 640px ) {.komponent {
baggrund- farve : skovgrøn;
}
}
I ovenstående kodestykke:
- Indstil først medieforespørgslen, der anvender CSS-egenskaber til den valgte elementklasse ' komponent ' når skærmstørrelsesbredden bliver større end ' 640px ”.
- Vælg derefter 'komponentklassen og indstil værdien for ' skovgrøn ' for ' baggrundsfarve ” ejendom.
.komponent {
baggrund- farve : dodgerblue;
}
}
Så til ovenstående kodestykke:
- Indstil medieforespørgslen til at anvende typografier, når bredden er mindre end ' 1000px ”.
- Vælg nu ' komponent ' klasse og angiv værdien ' dodgerblue ' for ' baggrundsfarve ” ejendom:
Efter at have udført ovenstående kodestykker, ser outputtet sådan ud:
Outputtet viser, at medieforespørgslen ændrer baggrunden baseret på skærmstørrelsen. Skriftstørrelsen, bredden, højden og andre CSS-egenskaber kan også anvendes ved at følge det samme mønster.
De mulige pausepunkters skærmstørrelser, der skal tages i betragtning, når medieforespørgslerne bruges, er:
- Til ' lille ' skærmstørrelse, indstil bredden mindre end ' 640px ”.
- Til ' medium ' viewport skærmstørrelse, bredden varierer mellem ' 641px ' og ' 1007 pixels ”.
- Til ' stor ' skærmstørrelse, indstil bredden til ' 1008 px ” eller større.
Konklusion
For at skabe et responsivt webstedsdesign skal udviklerne tilføje ' viewport ' tag i '