Begrepet responsiv webdesign tilsvarer strategien om å lage et nettsted som oppfører seg avhengig av enheten det vises på. For eksempel kan du få et nettsted til å endre oppførselen i henhold til skjermbredden, oppløsningen, orienteringen osv. Et responsivt webdesign gjør et nettsted dynamisk i naturen.

Hvis du gjør nettstedet ditt lydhør, er det ikke nødvendig å utvikle det samme nettstedet om og om igjen for hver nye enhet som dukker opp i markedet. Nettstedet vil automatisk endre oppførselen sin basert på brukerens ønske. Denne responsen vil gjøre at nettstedet endrer utseendet når brukeren bytter fra å bruke nettstedet på et skrivebord til en mobiltelefon.

Nå vet vi hva et responsivt nettsted er, det neste store spørsmålet er hvordan du genererer et. Tenk på neste avsnitt for å utforske svaret på dette spørsmålet.

Hvordan gjøre webdesign responsiv

Å gjøre et nettsted som er responsivt innebærer å lage elementer som tekst, bilder osv. Fleksibelt ved å bruke visse oppsett. Nedenfor har vi vist deg forskjellige enheter som gjør at websiden din responderer.

1. Viewport

Det første og det fremste du bør ta med i kildekodefilen din for å gjøre websiden responsivt å legge til en responsiv metakode.

I denne taggen er bredden satt til enhetsbredde, noe som betyr at bredden på nettet vil endre For første gang vil zoomnivået være 1. Denne taggen kommanderer i utgangspunktet nettleseren for å justere målingene på en webside i henhold til forskjellige situasjoner.

2. Media spørsmål

CSS Media -spørsmål lar deg endre utseendet til nettstrukturen, avhengig av hvilken type enhet som viser nettstedet, for eksempel stasjonære maskiner, telefoner, bærbare datamaskiner osv., Og viser seg å være nyttige når det gjelder å designe responsive nettsteder. Dessuten kan disse brukes til å evaluere ting som høyden og bredden på enheten og visningsporten, retningen til enheten eller skjermoppløsningen.

Disse spørsmålene benytter seg av visse breakpoints som blir referert til som de punktene som utformingen av et nettsted endrer tilsvarer skjermstørrelsen på enhetstypen.

Syntaks

@Media ikke | Bare medietype og (mediefunksjon og | eller | ikke mediefunksjon)

//Kode;

Nøkkelord forklart

• ikke: Det reverserer semantikken i en medieforespørsel.
• bare: Det forhindrer de gamle versjonene av en nettleser i å implementere Media Query.
• og: Den kombinerer en medietype med en viss mediefunksjon.

La oss nå utforske et eksempel på hvordan du gjør websiden din responsiv ved hjelp av medier.

Eksempel
Nedenfor demonstrerer vi en medieforespørsel.

Html

Hei Verden!

Her har vi definert en

element og plasserte litt tekst inni den.

CSS

H1
Font-Family: 'Times New Roman', Times, Serif;

@Media-skjerm og (min bredde: 720px)
H1
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

I koden ovenfor er den første fontfamilien i avsnittet satt til Times New Roman, mens etter å ha brukt medieforespørselen der vi har spesifisert at hvis minimumsskjermbredden er 720px eller bredere, vil font-familiens avsnittet Endre til Verdana. Endre størrelsen på nettleservinduet for å se effekten av medieforespørselen.

Produksjon
Når minst skjermbredde er 720px eller bredere.

Når minimumsskjermbredden er mindre enn 720px.

Media -spørringen fungerer som den skal.

3. Flexbox

CSS Flexbox er en layoutmodell som tillater et effektivt og dynamisk arrangement av elementer. Denne utformingen er endimensjonal som tillater plassering av elementer inne i en beholder med like distribuert plass. Denne utformingen gjør elementene responsive, noe som betyr at elementene endrer atferden i henhold til den typen enhet som viser dem. Det gjør elementene fleksible og gir dem passende posisjon og symmetri.

En Flexbox består av følgende komponenter som er; en Flex Container og a Flex -vare. En flex-beholder definerer egenskapene til stamfarens element ved å stille skjermen til flex, eller inline-flex. I mellomtiden beskriver et flex -element egenskapene til etterfølgerelementene, og det kan være mange elementer til stede i en flex -beholder.

Dessuten er det en rekke egenskaper knyttet til en Flexbox som hjelper til med å gjøre en webdesign responsiv. Her skal vi vise deg hvordan du kan bruke en flexbox for å gjøre nettstedet ditt lydhør.

Eksempel
I eksemplet nedenfor har vi vist hvordan vi skal generere et responsivt bildnett ved hjelp av Flexbox.

Html

For å lage et bildedett lager vi et større divelement og hekker to divelementer inne i den større diven. Begge de nestede divelementene hekker videre tre bilder hver.

CSS

.container
Display: Flex;
Flex-Wrap: Wrap;
polstring: 5px;

Div med "container" -klassen vises som en flexbox, og har fått visse polstring. Dessuten er flex-wrap-egenskapen tildelt innpakningsverdi, noe som om nødvendig at bildene blir pakket inn i beholderen.

CSS

.Kolonner IMG
Bredde: 100%;

.kolonner
Flex: 50%;
Maks bredde: 50%;
polstring: 5px;

Bildene har fått 100% bredde slik at de passer på riktig.

CSS

@media (maks bredde: 600px)
.kolonner
Flex: 100%;
Maks bredde: 100%;

Sammen med Flexbox bruker vi også media -spørring. Media-spørringen ovenfor spesifiserer at hvis bredden er mindre enn den spesifiserte, vil to-kolonnen bli konvertert til en.

Produksjon
Skala nettleservinduet opp og ned for å se effekten.

Et responsivt bildnett ble opprettet.

4. Støvelhempe

Det er et CSS-ramme som lar brukerne lage nettsteder som er lydhøre og med en mobil-første tilnærming. Denne tilnærmingen spesifiserer at webdesignet først er utviklet for mobiltelefoner, og senere for andre enheter. Her skal vi demonstrere hvordan du lager en navigasjonslinje som er lydhør i naturen ved å bruke Bootstrap.

Eksempel
Vi bruker den nyeste versjonen av Bootstrap, som er Bootstrap 5 for å lage en navigasjonslinje.

Html

Først av alt for å bruke Bootstrap 5 inkluderer CDN for CSS, og JavaScript i HTML -filen din som vi har vist ovenfor.

Html

I koden ovenfor har vi laget en navigasjonslinje ved hjelp av forskjellige Bootstrap 5 -klasser. De .Navbar Klasse brukes til å pakke en navigasjonslinje sammen med .Navbar-Expand-SM klasse for responsiv kollaps. I mellomtiden .BG-suksess og .Navbar-Dark er de forskjellige fargevalgene som er gitt til navigasjonslinjen.

De .container Klasse pakker alle elementene i en navigasjonslinje med en fast bredde. I mellomtiden .Navbar-Nav Klasse brukes Lag en navigasjonslinje som har en maksimal høyde og er lett og støtter også dropdowns.

De .Nav-element, og .Nav-link brukes til å lage forskjellige listeelementer i navigasjonslinjen, og .aktiv Klassen lager en lenke aktiv.

Produksjon

En responsiv navigasjonslinje ble generert med hell.

Konklusjon

Responsiv webdesign tilsvarer strategien om å lage et nettsted å endre atferden avhengig av enheten den vises på. Hvis du gjør nettstedet ditt lydhør, er det ikke nødvendig å utvikle det samme nettstedet om og om igjen for hver nye enhet som dukker opp i markedet. Et slikt nettsted kan utvikles ved å bruke forskjellige enheter som å inkludere en responsiv metakode i filen din, ved hjelp av mediespørsmål, flexbox eller bootstrap. Her i denne oppskrivningen har vi vist deg forskjellige teknikker som du kan gjøre nettstedet ditt lydhør.