✅ Hur man skapar en responsiv layout

Innehållsförteckning

Krav
Fastigheterna minbredd och maxbredd
Använda Relativ vaddering

A responsiv layout har blivit normen inom webbdesign, innebär den här typen av sidlayout att om fönstret som innehåller det ändrar plötsligt storlek, det vill säga från mycket stort till mycket litet och vice versa, måste våra element kunna omordna sig för att behålla en anständig och funktionell användarupplevelse.

Detta har alltid varit tillgängligt med reglerna för CSSMen vid det senaste genomförandet av det samma togs bättre åtgärder, delvis på grund av den redan existerande moderna mobilvärlden, som är en av de stora konsumenterna av design mottaglig.

Även om det finns flera ramar som t.ex. Bootstrap eller fundament som ger oss en responsiv layout som standard kan vi inte alltid vara beroende av dem, det är därför det är mycket användbart att veta hur vi kan bygga en layout av dessa egenskaper på våra egna sätt.

Krav

1- För att slutföra denna handledning måste vi ha grundläggande kunskaper om HTML Y CSS, eftersom de är viktiga för att förstå exemplen i handledningen.

2- På den tekniska sidan kräver vi åtminstone en modern webbläsare som Google Chrome, en textredigerare för att skriva vår kod, kan vi använda Sublim text o NotePad ++ eller till och med Windows anteckningsblock eller Gedit på Linux om vi känner oss äventyrliga.

3- Slutligen behöver vi en internetanslutning för att ladda ner en bild eller två om vi vill placera den i vår kod som vi kommer att se i ett av exemplen som visas.

Fastigheterna minbredd och maxbredd

Detta är kanske den första aspekten som vi stöter på när vi arbetar med miljöer mottaglig, eftersom vi många gånger koncentrerar oss på när sidan blir mindre, men hur är det med de nya skärmarna 4K? Det är därför vi inte får försumma den maximala upplösning enligt vilken vår webbplats ser anständig ut.

minbredd och maxbreddEgenskaperna eller attributen minbredd Y maximal bredd CSS hjälper oss att bekämpa detta problem, eftersom de tillåter oss att fastställa de maximala marginaler under vilka vi vill att vår design ska vara mottaglig, eftersom om inte så kan ytterligheterna i storlekarna spela ett trick för oss, särskilt i dessa ögonblick då resolutionerna fortsätter att öka, men ännu inte blir massiva.

I följande exempel kommer vi att visa hur vi kan reglera våra layout tack vare de nämnda egenskaperna, för detta kommer vi att skapa ett dokument HTML med följande innehåll:

Responsivt layoutexempel 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 smärta. Aliquam ac nisl vehicula.

Det vi gjorde är att skapa tre div -element som fungerar som ett slags kolumner, så vi säger till dess behållarelement i det här fallet artikel att dess maximala bredd blir 1200 pxSå oavsett hur stor skärmen är kommer designen aldrig att växa mer därifrån, då skapar vi tre klasser, en för varje div och en vi tilldelar en minsta bredd på detta sätt, oavsett hur mycket skärmen reduceras, det går alltid. för att upprätthålla det minsta antalet proportioner är detta utmärkt för bilder som vi kommer att se på skärmdumpen av exemplet och slutligen till klassen flyta vi tilldelar den också en minsta bredd. Låt oss se hur vårt exempel ser ut i webbläsaren när vi har en stor upplösning:

FÖRSTORA

Låt oss nu se hur det skalas när vi reducerar webbläsarfönstret lite:

FÖRSTORA

Slutligen, låt oss se resultatet när vi får fönstret att ha en storlek som liknar en mobil:

Vi kunde se hur proportionerna som upprättades som minimum och max upprätthölls, men det viktigaste är att vår design anpassades till de olika upplösningar som vi visualiserade den med, och på så sätt kunde vi se till att användaren inte förlorade användbarhet i deras erfarenhet av vår webbplats.

Naturligtvis är detta långt ifrån något att visa i produktionen, men det ger oss en uppfattning om var vi ska fokusera några av insatserna när vi arbetar med riktiga mönster för våra applikationer och sidor, det intressanta är att kolumnerna justerades så att vi kunde se hur vi gick från en 3-kolums layout till en enkel kolumn layout.

Använda Relativ vaddering

De stoppning Det är ett mått som gör att vi kan behålla ett utrymme med innehållet mot behållarens kanter så att vi fastställer en gräns för hur långt det kommer att gå, det ska inte förväxlas med marginalen eftersom det är ett annat koncept.

Poängen är att stoppning tas nästan aldrig med när man gör en layout att vara mottaglig vilket resulterar i texter och innehåll som senare förblir icke-estetiskt när man ändrar upplösningen som designen ses med.

Vad vi ska göra i följande kod är att placera a stoppning som fungerar relativt, det vill säga när fönstrets storlek justeras, vår stoppning Det kommer att förändras för att behålla proportionerna och på så sätt få innehållet att alltid förbli som vi har ordnat det trots att vi har mindre utrymme på grund av förändringen i upplösning. Låt oss se vårt kodexempel:

Relativ vadderingBehåll proportionerna med en relativ vaddering

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 definierar vi egenskaperna stoppning av varje klass med procentuella värden istället för fasta värden med mått i pixlar, på så sätt kommer webbläsarens stiltolkare att ge ett mått som går enligt det värde vi har placerat, i slutet när vi ser vårt exempel i webbläsaren får vi följande:

FÖRSTORA

Om vi nu minskar storleken på fönstret kommer vi att se hur en justering görs men behåller ett proportionellt avstånd från texten till kanterna:

Vi märker sedan hur vår design upprätthålls och förhindrar deformation genom att minska upplösningen för personen som innehåller den och därmed upprätthålla en konsekvent upplevelse för vår användare.

Även om det finns mer avancerade koncept som vi kommer att beröra i andra självstudier, kan vi med detta par tricks eller tips lyckas ge nytt liv åt våra gamla webbplatser och mycket mer nu än sökmotorer som Google De ber oss om en mobilversion för att kunna ge oss preferenser i resultaten. Det viktigaste för att uppnå fantastiska resultat är att experimentera och fortsätta träna mycket så att dessa lösningar kommer naturligt ur vårt sinne och inte behöver tillgripa guider hela tiden.

Med detta avslutar vi denna handledning, eftersom vi ser att vi inte behöver några ramar för att uppnå resultat mottaglig, och vi behöver inte heller lämna kombinationen HTML + CSSDet enda är att om vi måste bygga våra egna verktyg, är tillfredsställelsen med att förbättra vår design en stor belöning.