Sådan opretter du et responsivt layout

EN lydhør layout er blevet normen inden for webdesign, betyder denne type sidelayout, at hvis vinduet, der indeholder det, pludselig ændrer størrelse, det vil sige fra meget stort til meget lille og omvendt, skal vores elementer være i evnen til at omarrangere for at opretholde en anstændig og funktionel brugeroplevelse.

Dette har altid været tilgængeligt med reglerne for CSSI den sidste implementering af det samme blev der imidlertid truffet bedre foranstaltninger, dels på grund af den eksisterende mobilverdens eksisterende eksistens, som er en af ​​de store forbrugere af design lydhør.

Selvom der er flere rammer som f.eks Bootstrap eller Fundament som giver os et responsivt layout som standard, kan vi ikke altid stole på dem, derfor er det meget nyttigt at vide, hvordan vi kan opbygge et layout af disse egenskaber ved vores egne midler.

Krav

1- For at fuldføre denne vejledning skal vi have grundlæggende viden om HTML Y CSS, da de er afgørende for at forstå eksemplerne i selvstudiet.

2- På den tekniske side kræver vi mindst en moderne browser som Google Chrome, en teksteditor til at skrive vores kode, kan vi bruge Sublim tekst o NotePad ++ eller endda Windows notesblok eller Gedit på Linux, hvis vi føler os eventyrlystne.

3- Endelig har vi brug for en internetforbindelse for at downloade et billede eller to, hvis vi vil placere det i vores kode, som vi vil se i et af de viste eksempler.

Ejendommene minwidth og maxwidth

Dette er måske det første aspekt, vi støder på, når vi arbejder med miljøer lydhør, da vi mange gange koncentrerer os om, hvornår siden bliver mindre, men hvad med de nye skærme af 4K? Derfor må vi ikke tilsidesætte den maksimale opløsning, som vores websted ser anstændigt ud under.

minwidth og maxwidthEgenskaberne eller attributterne minbredde Y maks. bredde CSS hjælper os med at bekæmpe dette problem, da de giver os mulighed for at fastsætte de maksimale marginer, som vi ønsker, at vores design skal være lydhør, da hvis ikke, kan ekstremerne i størrelserne spille et trick på os, især i disse øjeblikke, hvor resolutionerne fortsat stiger, men endnu ikke bliver massive.

I det følgende eksempel vil vi demonstrere, hvordan vi kan regulere vores layout takket være de nævnte egenskaber, til dette vil vi oprette et dokument HTML med følgende indhold:

 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.
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 at oprette tre div -elementer, der fungerer som en slags kolonner, så vi siger til dets containerelement i dette tilfælde artikel at dens maksimale bredde vil være 1200 pxSå uanset hvor stor skærmen er, vil designet aldrig vokse mere derfra, så opretter vi tre klasser, en for hver div og en vi tildeler en minimumsbredde på denne måde, uanset hvor meget skærmen reduceres, det går altid. for at opretholde dette minimum af proportioner, er dette glimrende til billeder, som vi vil se på skærmbilledet af eksemplet og endelig til klassen flyde vi tildeler det også en minimumsbredde. Lad os se, hvordan vores eksempel ser ud i browseren, når vi har en stor opløsning:

FORSTØRRE

Lad os nu se, hvordan det skaleres, når vi reducerer browservinduet lidt:

FORSTØRRE

Lad os endelig se resultatet, når vi får vinduet til at have en størrelse, der ligner en mobils størrelse:

Vi kunne se, hvordan proportionerne blev fastlagt som minimum og maksimum blev opretholdt, men det vigtigste er, at vores design blev tilpasset de forskellige opløsninger, som vi visualiserede det med, og på denne måde kunne vi sikre, at brugeren ikke tabte brugervenlighed i deres erfaring med vores websted.

Selvfølgelig er dette langt fra noget, der skal vises i produktionen, men det giver os en idé om, hvor vi skal fokusere nogle af indsatserne, når vi arbejder på rigtige designs til vores applikationer og sider, det interessante er, at kolonnerne blev justeret, så vi var i stand til at se, hvordan vi gik fra et 3-kolonne layout til et enkelt kolonne layout.

Bruger Relativ polstring

Det polstring Det er et mål, der giver os mulighed for at bevare et mellemrum af indholdet mod kanterne af beholderen, så vi fastsætter en grænse for, hvor langt det vil gå, det skal ikke forveksles med margenen, da det er et andet begreb.

Pointen er, at polstring tages næsten aldrig i betragtning, når man laver en layout at være lydhør resulterer i tekster og indhold, der senere forbliver ikke-æstetisk, når man ændrer den opløsning, som designet ses med.

I den følgende kode, hvad vi vil gøre, er at placere en polstring som fungerer relativt, det vil sige, da vinduets størrelse justeres, vores polstring Det vil ændre sig for at bevare proportionerne og på denne måde få indholdet til at forblive som vi har arrangeret det på trods af at det har mindre plads på grund af ændringen i opløsning. Lad os se vores kodeeksempel:

 Relativ polstringBevar proportionerne 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.
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.
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 egenskaberne polstring af hver klasse med procentværdier i stedet for faste værdier med målinger i pixels, på denne måde vil stilfortolkeren i browseren give en måling, der går efter den værdi, vi har placeret, til sidst når vi ser vores eksempel i browseren får vi følgende:

FORSTØRRE

Hvis vi nu reducerer vinduets størrelse, vil vi se, hvordan en justering foretages, men opretholder en proportional afstand fra teksten til kanterne:

Vi bemærker derefter, hvordan vores design fastholdes og forhindrer deformation ved at reducere opløsningen for den person, der indeholder det, og dermed opretholde en konsekvent oplevelse for vores bruger.

Selvom der er mere avancerede koncepter, som vi vil komme ind på i andre selvstudier, kan vi med dette par tricks eller tips klare at give nyt liv til vores gamle websteder og meget mere nu end søgemaskiner som Google De beder os om en mobilversion for at kunne give os præferencer i resultaterne. Det vigtigste for at opnå gode resultater er at eksperimentere og blive ved med at øve meget, så disse løsninger kommer naturligt ud af vores sind og ikke behøver at ty til guider hele tiden.

Med dette afslutter vi denne vejledning, da vi ser, at vi ikke har brug for nogen rammer for at opnå resultater lydhør, og vi behøver heller ikke at forlade kombinationen HTML + CSSDet eneste er, at hvis vi skal bygge vores egne værktøjer, er tilfredsheden ved at forbedre vores design en stor belønning.