Når du designer en webside som justerer elementene i riktige posisjoner, er av stor betydning sammen med å gjøre dem responsive, noe som betyr at de vil endre oppførselen sin, avhengig av de forskjellige typene enheter som viser websiden. En måte å utføre begge de nevnte oppgavene er ved å bygge et nettvisningssystem. Her i denne oppskrivningen vil vi veilede deg trinn for trinn angående hvordan du kan lage en responsiv nettvisning fra bunnen av.

La oss utforske hva en rutenettvisning faktisk er før vi hopper mot konstruksjonen.

Hva er en rutenett?

En rutenettvisning er en teknikk som deler en webside i forskjellige kolonner som gjør posisjonering av elementer enklere. En rutenettvisning, som er lydhør, består vanligvis av 12 kolonner sammen med 100% bredde og skalerer opp og ned avhengig av størrelsen på nettleseren.

La oss nå se hvordan du bygger en responsiv nettvisning fra bunnen av.

Å bygge et responsivt rutenettutsikt

Nedenfor har vi demonstrert trinn-for-trinns prosedyre for å konstruere en responsiv nettvisning.

Forutsetning

Før du hopper mot koding, må du tegne rutenettet på papir slik at du vet nøyaktig hvor du skal plassere hvilket element. For eksempel er her skissen av rutenettet vi skal bygge.

Nå som vi har skissen vår, la oss begynne den kodende delen.

Trinn 1

Den grunnleggende nødvendigheten av å lage en responsiv webside er å legge til en responsiv metakode i HTML -filen din.

Html

Bredde = enhetsbredde-attributt betyr at bredden på websiden vil endre seg i korrespondanse til bredden på enheten, mens startskala = 1.0 attributt betyr når websiden er lastet av nettleseren for første gang zoomnivået vil være 1.

Steg 2

Legg til noen HTML -elementer som du vil vise på websiden.

Html

Linux hint

For å legge til innhold i vår toppseksjon lager vi en DIV -beholder og pakker overskriften innenfor denne beholderen.

Html

• Om oss


• Forfattere


• Publiserte artikler


• Kategorier av artikler

Alt om programmeringsspråk!

Her finner du vel-skrevet og godt strukturerte artikler relatert til alle programmeringsspråk sammensatt av våre raffinerte forfattere.

Med det formål å sette inn innhold til sidefeltet har vi laget en div med klassenavn “Col-3 sidefelt” og nestet en uordnet liste inne i den. Når det gjelder hoveddelen, har vi lagt til to avsnitt og nestet dem inne i en annen div med klassenavn "Col-9 Main". Begge divelementene er ytterligere nestet i en større div med klassenavnet "Container".

Klassene som er tildelt de nestede divelementene vil bli forklart senere.

Steg 3

Nå er vi ferdige med vår HTML -del og går nå videre til vår CSS -del av koden. Det første som må gjøres i stilarket er å stille inn html-elementer i boksen til grenseboks til grenseboks.

CSS

*
Bokstørrelse: Border-Box;

Årsaken bak dette er at denne egenskapen inkluderer polstring og grense i total høyde og bredde på HTML -elementer.

Steg 4

La oss nå konvertere siden vår til en responsiv nettvisning av 12 kolonner. For å gjøre dette må vi utføre visse beregninger for å gi visse bredder til hver kolonne og få kontroll over websiden når det gjelder å arrangere elementene.

Bredden på en enkelt kolonne = 1/12 av den totale skjermbredden = 100%/12 = 8.33%.

Bredden på to kolonner kombinert = 2/12. av den totale skjermbredden = 2 (100%)/12 = 16.66%

Bredden på tre kolonner kombinert = 3/12. av den totale skjermbredden = 3 (100%)/12 = 25%

Bredden på fire kolonner kombinert = 4/12. av den totale skjermbredden = 4 (100%)/12 = 33.33%

Og så videre.

CSS

.col-1 bredde: 8.33%;
.col-2 bredde: 16.66%;
.col-3 bredde: 25%;
.col-4 bredde: 33.33%;
.col-5 bredde: 41.66%;
.col-6 bredde: 50%;
.col-7 bredde: 58.33%;
.col-8 bredde: 66.66%;
.col-9 bredde: 75%;
.col-10 bredde: 83.33%;
.col-11 bredde: 91.66%;
.col-12 bredde: 100%;

Bredden på alle kolonnene er definert i CSS.

Merk:

Vi ønsket å plassere sidefeltet og hoveddelen i to kolonner. En rutenett med to kolonner ser ut som dette.

Når vi ser på bredden på de forskjellige kolonnene i koden over, finner vi ut at tre kolonner vil ha 25% bredde, og ni kolonner vil ha 75% bredde. Derfor har div som hekker menylisten blitt tildelt .col-3 Klasse, mens DIV med innholdet i hovedseksjonen er gitt .col-9 klasse.

Trinn 5

Bruker nå klassen “.col- ”, la oss gi litt polstring til kolonnene og flyte dem til venstre.

CSS

[klasse*= "col-"]
FLOAT: Venstre;
polstring: 10px;

Flyten: Venstre eiendom plasserer disse kolonnene til venstre for beholderen som holder dem slik at tekst og andre inline -elementer vil vikle seg inn i kolonnene. Dette vil imidlertid plassere elementene som om kolonnene ikke er der i det hele tatt. Derfor må vi fjerne strømmen. For å gjøre det, følg kodebiten nedenfor.

CSS

.Container :: Etter
innhold: "";
Klar: begge;
Display: tabell;

Den: Etter klassen og innholdsegenskapen brukes til å legge til innhold etter beholderen. I mellomtiden vil tabellverdien til displayegenskapen få innholdet til å vises i form av en tabell I.e i rader og kolonner.

Trinn 6

.Overskrift
Bakgrunnsfarge: Bisque;
Farge: Hvit;
polstring: 20px;

.sidefelt ul
Margin: Auto;
polstring: 0px;

.sidefelt li
polstring: 10px;
Margin-Bottom: 10px;
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

Til slutt styler vi nå elementene våre ved å bruke klassene som er tildelt Div Containers of the Header, og sidefelt.

Produksjon

Nettsiden er vist ved tilfeldige skjermbredder.

Dette er vår webside på 1250px.

Vår webside med bredden på 600px.

Konklusjon

For å bygge en responsiv nettvisning må du først tegne oppsettet som du vil. For eksempel, i eksemplet som ble brukt i denne artikkelen, delte vi siden vår i 12 kolonner ved å beregne prosentandelen av hver kolonne. Etterpå kan du bruke den prosentandelen til å plassere elementene dine nøyaktig over forskjellige kolonner. I denne guiden har vi vist deg en trinn-for-trinns prosedyre for å bygge en rutenett fra bunnen av.