✅ Hvordan lage et responsivt oppsett

Innholdsfortegnelse

Krav
Eiendommene minwidth og maxwidth
Bruker Relativ polstring

EN responsivt oppsett har blitt normen i webdesign, betyr denne typen sideoppsett at hvis vinduet som inneholder det plutselig endrer størrelse, det vil si fra veldig stort til veldig lite og omvendt, må elementene våre være i evnen til å omorganisere seg for å opprettholde en grei og funksjonell brukeropplevelse.

Dette har alltid vært tilgjengelig med reglene for CSSImidlertid ble det ved den siste implementeringen av det samme iverksatt bedre tiltak, delvis på grunn av den eksisterende mobilverdenens eksisterende eksistens, som er en av de store forbrukerne av design mottakelig.

Selv om det er flere rammer som f.eks Støvelhempe eller Fundament som gir oss et responsivt oppsett som standard, kan vi ikke alltid stole på dem, derfor er det veldig nyttig å vite hvordan vi kan bygge et oppsett av disse egenskapene på egne måter.

Krav

1- For å fullføre denne opplæringen må vi ha grunnleggende kunnskap om HTML Y CSS, siden de er viktige for å forstå eksemplene i opplæringen.

2- På den tekniske siden krever vi minst en moderne nettleser som Google Chrome, et tekstredigeringsprogram for å skrive koden vår, kan vi bruke Sublim tekst o NotePad ++ eller til og med Windows notisblokk eller Gedit på Linux hvis vi føler oss eventyrlystne.

3- Til slutt trenger vi en Internett -tilkobling for å laste ned et bilde eller to hvis vi vil plassere det i koden vår, slik vi vil se i et av eksemplene som vises.

Eiendommene minwidth og maxwidth

Dette er kanskje det første aspektet vi kommer over når vi arbeider med miljøer mottakelig, siden vi mange ganger konsentrerer oss om når siden blir mindre, men hva med de nye skjermene til 4K? Det er derfor vi ikke må ignorere maksimal oppløsning som nettstedet vårt ser anstendig ut.

minwidth og maxwidthEgenskapene eller attributtene minbredde Y maks bredde CSS hjelper oss med å bekjempe dette problemet, siden de tillater oss å fastsette maksimalmarginene vi ønsker at designet vårt skal være mottakelig, siden hvis ikke, kan ekstremene i størrelsene lure oss, spesielt i disse øyeblikkene hvor resolusjonene fortsetter å øke, men ennå ikke blir massive.

I det følgende eksemplet vil vi demonstrere hvordan vi kan regulere våre oppsett takket være de nevnte egenskapene, for dette skal vi lage et dokument HTML med følgende innhold:

Responsivt layout eksempel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies i quis smerte. Aliquam ac nisl vehicula.

Det vi gjorde er å lage tre div -elementer som fungerer som en slags kolonner, så vi sier til beholderelementet i dette tilfellet artikkel at den maksimale bredden vil være 1200 pikslerSå uansett hvor stor skjermen er, vil designet aldri vokse mer derfra, så lager vi tre klasser, en for hver div og en vi tildeler en minimumsbredde på denne måten, uansett hvor mye skjermen reduseres, det går alltid. for å opprettholde dette minimumet av proporsjoner, er dette utmerket for bilder som vi vil se på skjermbildet av eksemplet, og til slutt til klassen flyte Vi tildeler den også en minimumsbredde. La oss se hvordan vårt eksempel ser ut i nettleseren når vi har en stor oppløsning:

FORSTØRRE

La oss nå se hvordan det skaleres når vi reduserer nettleservinduet litt:

FORSTØRRE

Til slutt, la oss se resultatet når vi får vinduet til å ha en størrelse som ligner på en mobil:

Vi kunne se hvordan proporsjonene etablert som minimum og maksimum ble opprettholdt, men det viktigste er at designet vårt ble tilpasset de forskjellige oppløsningene som vi visualiserte det med, og på denne måten kunne vi sikre at brukeren ikke mistet brukervennlighet i deres erfaring med nettstedet vårt.

Selvfølgelig er dette langt fra noe som skal vises i produksjonen, men det gir oss en ide om hvor vi bør fokusere noen av innsatsene når vi jobber med virkelige design for våre applikasjoner og sider, det interessante er at kolonnene ble justert slik at vi var i stand til å se hvordan vi gikk fra et 3-kolonne-oppsett til et enkelt-kolonne-oppsett.

Bruker Relativ polstring

De polstring Det er et mål som lar oss beholde et mellomrom av innholdet mot kantene på beholderen, slik at vi etablerer en grense for hvor langt det vil gå, det skal ikke forveksles med marginen siden det er et annet konsept.

Poenget er at polstring blir nesten aldri tatt i betraktning når du lager en oppsett å være mottakelig resulterer i tekster og innhold som senere forblir ikke-estetisk når du endrer oppløsningen som designet blir sett på.

I den følgende koden er det vi skal gjøre å plassere a polstring som fungerer relativt, det vil si når størrelsen på vinduet justeres, vår polstring Det vil endre seg for å opprettholde proporsjonene og på denne måten få innholdet til å forbli slik vi har ordnet det til tross for at det har mindre plass på grunn av endringen i oppløsning. La oss se vårt kodeeksempel:

Relativ polstringOppretthold proporsjonene med en relativ polstring

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Som vi ser definerer vi egenskapene polstring av hver klasse med prosentverdier i stedet for faste verdier med målinger i piksler, på denne måten vil stiltolkeren i nettleseren gi en måling som går i henhold til verdien vi har plassert, til slutt når vi ser vårt eksempel i nettleseren får vi følgende:

FORSTØRRE

Nå hvis vi reduserer størrelsen på vinduet, vil vi se hvordan en justering gjøres, men opprettholde en proporsjonal avstand fra teksten til kantene:

Vi merker deretter hvordan designen vår opprettholdes og forhindrer deformasjon ved å redusere oppløsningen til personen som inneholder den, og dermed opprettholde en konsekvent opplevelse for brukeren vår.

Selv om det er mer avanserte konsepter som vi kommer til å berøre i andre opplæringsprogrammer, kan vi med dette par triks eller tips klare å gi nytt liv til de gamle nettstedene våre, og mye mer nå enn søkemotorer som Google De ber oss om en mobilversjon for å kunne gi oss preferanser i resultatene. Det viktigste for å oppnå flotte resultater er å eksperimentere og fortsette å øve mye, slik at disse løsningene kommer naturlig ut av tankene våre og ikke trenger å ty til guider til enhver tid.

Med dette fullfører vi denne opplæringen, ettersom vi ser at vi ikke trenger noen rammeverk for å oppnå resultater mottakelig, og vi trenger heller ikke å forlate kombinasjonen HTML + CSSDet eneste er at hvis vi må bygge våre egne verktøy, er tilfredsheten med å forbedre designet vårt en stor belønning.