Denne artikkelen demonstrerer trinnene for å lage et responsivt nettsteddesign i HTML og CSS ved å bruke:
Hvordan lage et responsivt nettsteddesign med HTML og CSS?
Å lage et responsivt nettsteddesign med HTML og CSS innebærer å bygge et oppsett som tilpasser seg ulike skjermstørrelser og oppløsninger. Her er trinnene du kan følge for å lage et responsivt nettsteddesign:
Trinn 1: Viewport Meta Tag
« viewport Metataggen spiller en viktig rolle i å lage responsiv webdesign. Den er satt inn i '
< meta Navn = 'viewport' innhold = 'width=device-width,initial-scale=1' / >
Metakoden ovenfor har to attributter:
- « Navn ”-attributt forteller navnet på funksjonaliteten som denne taggen er opprettet/brukt til. Sett for eksempel ' viewport ' til ' Navn ”-attributt for å håndtere visningsporten til forskjellige enheter.
- « innhold ” attributt definerer forrige attributtverdi. Den angir bredden på hver enhet og skalerer dokumentet/nettsiden til 100 %.
Trinn 2: Responsive bilder
Siden bildestørrelsen varierer fra hverandre, er det derfor vanskelig å sette den samme ' høyde ' eller ' bredde ” eiendom for hvert bilde. Når størrelsen på bildet er fast, endrer ikke brukere størrelsen på nettsidebildet med skjermen. Imidlertid kan brukere angi det responsive bildet via følgende kode:
img {
maks- bredde : 100 %;
}
« maks bredde CSS-egenskapen begrenser bildet fra å vises innenfor den tildelte plassen. Ved å sette verdien i '%', endres størrelsen på bildet sammen med størrelsen på det overordnede elementet. Dette skaper en responsiv effekt for bildet.
Trinn 3: Flexbox-oppsett
Flexbox-oppsettet anbefales sterkt for å lage et responsivt nettsteddesign. Den lar HTML-elementene vises i en bestemt posisjon og endre størrelsen på tilgjengelig plass for hvert barn i henhold til størrelsen som er tilgjengelig av den overordnede div. Flexbox-oppsettet inneholder flere egenskaper som gir mye frihet til utvikleren, som i koden nedenfor:
< stil >
.forelder {
display: flex;
}
.barn {
flex: 1 ;
tekst- tilpasse : senter;
}
< / stil >
< kropp >
< div klasse = 'foreldre' >
< div klasse = 'barn' stil = 'kant: 3px solid blåfiolett;' >Velkommen< / div >
< div klasse = 'barn' stil = 'kant: 3px ensfarget mørkegrønn;' >til< / div >
< div klasse = 'barn' stil = 'border: 3px solid rød;' >Linuxint< / div >
< / div >
< / kropp >
I kodebiten ovenfor:
- Opprett først et overordnet div-element med en id på ' forelder ' inne i ' ' stikkord.
- Deretter oppretter du flere underordnede div-elementer og tilordner dem en klasse med ' barn '.
- Deretter velger du ' forelder ' klasse og oppgi verdien av ' bøye seg ' for CSS ' vise ' eiendom.
- Etter det, oppgi en verdi på ' 1 ' til ' bøye seg ' eiendom til hver ' barn ” klasse som gjør at underordnet element vises som en flex.
Etter å ha utført koden ovenfor, ser nettsiden slik ut:
Utdataene ovenfor viser at det underordnede elementet får lik bredde når nettleseren endres.
Trinn 4: Rutenettoppsett
Rutenettoppsettet lager et rutenett og tildeler HTML-elementene inne i rutenettdelen. Rutenettelementene endres i forhold til skjermstørrelsen på nettsiden. Det skaper et responsivt design når HTML-elementstørrelsen endres i henhold til enhetens skjerm:
< stil >.container {
display: rutenett;
rutenett-mal-kolonner: 1fr 1fr 1fr;
}
< / stil >
< kropp >
< div klasse = 'komponent' >
< div stil = 'border: 3px solid forestgreen;' >Linuxint< / div >
< div stil = 'kant: 3px ensfarget mørkegrønn;' >Linuxint< / div >
< div stil = 'border: 3px solid rød;' >Linuxint< / div >
< / div >
< / kropp >
I koden ovenfor:
- Opprett først en overordnet div og tilordne den en klasse ' komponent ' inne i ' ' stikkord. Etter det lager du tre underordnede div-elementer i den.
- Deretter, i CSS-filen tilordne en ' Nett 'verdi til ' vise ' eiendom for ' container ” div.
- Deretter lager du tre like store deler på nettsiden ved å bruke ' rutenett-mal-kolonne ' egenskap og sett den lik ' 1fr 1fr 1fr ' hvor fr betyr ' brøkdel '.
Etter å ha kompilert koden ovenfor, ser utdataene slik ut:
Utdataene viser at divene endrer størrelsen på seg selv i henhold til skjermstørrelsen med like proporsjoner.
Trinn 5: Medieforespørsler
Bruken av medieforespørsler for å lage responsiv design er en slags gammeldags ting, men likevel bruker de fleste nettsteder mediespørringer. Mediespørringene kan legges til direkte i CSS-filen etter å ha lagt til standardstilen for det valgte HTML-elementet. Mediespørringen gjør koden litt lengre og rotete. Fordi utvikleren må sette inn kode for hver skjermstørrelse separat.
Se for eksempel kodebiten nedenfor:
@ media skjerm og ( min- bredde : 640 piksler ) {.komponent {
bakgrunn- farge : Skoggrønn;
}
}
I kodebiten ovenfor:
- Sett først mediespørringen som bruker CSS-egenskaper på den valgte elementklassen ' komponent ' når skjermstørrelsen blir større enn ' 640 piksler '.
- Deretter velger du 'komponentklassen og setter verdien til ' Skoggrønn ' for ' bakgrunnsfarge ' eiendom.
.komponent {
bakgrunn- farge : dodgerblue;
}
}
Så for kodebiten ovenfor:
- Still inn mediespørringen til å bruke stiler når breddestørrelsen er mindre enn ' 1000 piksler '.
- Velg nå ' komponent ' klasse og oppgi en verdi på ' dodgerblue ' for ' bakgrunnsfarge ' eiendom:
Etter å ha utført kodebitene ovenfor, ser utdataene slik ut:
Utdataene viser at medieforespørselen endrer bakgrunnen basert på skjermstørrelsen. Skriftstørrelsen, bredden, høyden og andre CSS-egenskaper kan også brukes ved å følge det samme mønsteret.
De mulige skjermstørrelsene for brytepunkter som må vurderes når du bruker mediespørringene er:
- For ' liten ' skjermstørrelse, angi bredden mindre enn ' 640 piksler '.
- For ' medium ' viewport skjermstørrelse, bredden varierer mellom ' 641 piksler ' og ' 1007 piksler '.
- For ' stor ' skjermstørrelse, sett bredden til ' 1008 piksler ' eller høyere.
Konklusjon
For å lage et responsivt nettsteddesign, må utviklerne legge til ' viewport ' tag i '