EEN responsieve lay-out de norm is geworden in webdesign, betekent dit type paginalay-out dat als het venster waarin het zich bevindt abrupt van grootte verandert, dat wil zeggen van heel groot naar heel klein en vice versa, onze elementen in staat moeten zijn om te herschikken om een fatsoenlijke en functionele gebruikerservaring.
Dit is altijd beschikbaar geweest met de regels van CSSBij de laatste implementatie van hetzelfde werden echter betere maatregelen genomen, deels vanwege het reeds bestaan van de moderne mobiele wereld, die een van de grote consumenten van design is snel reagerend.
Hoewel er verschillende kaders zijn, zoals: Bootstrap of fundering die ons standaard een responsieve lay-out geven, we kunnen er niet altijd van afhankelijk zijn, daarom is het erg handig om te weten hoe we op eigen kracht een lay-out van deze kenmerken kunnen bouwen.
Vereisten
1- Om deze tutorial te voltooien, hebben we basiskennis nodig van: HTML Y CSS, omdat ze essentieel zijn om de voorbeelden in de zelfstudie te begrijpen.
2- Aan de technische kant hebben we minimaal een moderne browser nodig zoals Google Chrome, een teksteditor om onze code te schrijven, kunnen we gebruiken Sublieme tekst o NotePad ++ of zelfs het Windows-kladblok of Gedit op Linux als we ons avontuurlijk voelen.
3- Ten slotte hebben we een internetverbinding nodig om een of twee afbeeldingen te downloaden als we deze in onze code willen plaatsen, zoals we zullen zien in een van de getoonde voorbeelden.
De eigenschappen minwidth en maxwidth
Dit is misschien wel het eerste aspect dat we tegenkomen bij het werken met omgevingen snel reagerend, omdat we ons vaak concentreren op wanneer de pagina kleiner wordt, maar hoe zit het met de nieuwe schermen van? 4K? Daarom mogen we de maximale resolutie waaronder onze website er fatsoenlijk uitziet niet verwaarlozen.
minwidth en maxwidthDe eigenschappen of attributen minimale breedte Y Maximale wijdte CSS helpt ons om dit probleem te bestrijden, omdat ze ons in staat stellen de maximale marges vast te stellen waaronder we ons ontwerp willen hebben snel reagerend, want als dat niet het geval is, kunnen de extremen in de maten ons parten spelen, vooral op deze momenten waarop de resoluties blijven toenemen, maar nog niet enorm worden.
In het volgende voorbeeld laten we zien hoe we onze lay-out dankzij de genoemde eigenschappen gaan we hiervoor een document maken HTML met de volgende inhoud:
Responsieve lay-out voorbeeld 1Wat we deden is drie div-elementen maken die als een soort kolommen werken, dus in dit geval zeggen we tegen het container-element artikel dat de maximale breedte zal zijn 1200 pxDus hoe groot het scherm ook is, het ontwerp zal vanaf daar nooit meer groeien, dan maken we drie klassen, één voor elke div en één kennen we op deze manier een minimale breedte toe, ongeacht hoeveel het scherm wordt verkleind, het om dat minimum aan verhoudingen te behouden, is dit uitstekend voor afbeeldingen zoals we zullen zien in de schermafbeelding van het voorbeeld, en tot slot voor de klas vlot we kennen er ook een minimale breedte aan toe. Laten we eens kijken hoe ons voorbeeld eruitziet in de browser als we een grote resolutie hebben:
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 in quis pain. Aliquam ac nisl voertuigen.
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 in quis pain. Aliquam ac nisl voertuigen.
VERGROTEN
Laten we nu eens kijken hoe het schaalt als we het browservenster een beetje verkleinen:
VERGROTEN
Laten we ten slotte het resultaat bekijken wanneer we het venster een grootte geven die vergelijkbaar is met die van een mobiel:
We konden zien hoe de verhoudingen die als minimum en maximum waren vastgesteld, werden behouden, maar het belangrijkste is dat ons ontwerp is aangepast aan de verschillende resoluties waarmee we het hebben gevisualiseerd, en op deze manier konden we ervoor zorgen dat de gebruiker niet verloor bruikbaarheid in hun ervaring met onze site.
Dit is natuurlijk verre van iets dat in productie moet worden getoond, maar het geeft ons een idee van waar we een aantal van de inspanningen moeten richten wanneer we werken aan echte ontwerpen voor onze applicaties en pagina's, het interessante is dat de kolommen zijn aangepast zodat we konden zien hoe we van een 3-koloms layout naar een single-column layout gingen.
De … gebruiken Relatieve opvulling
De opvulling Het is een maatregel waarmee we een ruimte van de inhoud tegen de randen van de container kunnen behouden, zodat we een limiet kunnen stellen aan hoe ver het zal gaan, het moet niet worden verward met de marge, want dat is een ander concept.
Het punt is dat de opvulling wordt bijna nooit in aanmerking genomen bij het maken van een lay-out zijn snel reagerend wat resulteert in teksten en inhoud die later niet-esthetisch blijven bij het wijzigen van de resolutie waarmee het ontwerp wordt bekeken.
Wat we in de volgende code zullen doen, is een plaatsen opvulling wat relatief werkt, dat wil zeggen, als de grootte van het venster wordt aangepast, onze opvulling Het zal veranderen om de verhoudingen te behouden en op deze manier blijft de inhoud altijd zoals we het hebben gerangschikt, ondanks dat er minder ruimte is vanwege de verandering in resolutie. Laten we ons codevoorbeeld bekijken:
Relatieve opvullingHandhaaf de verhoudingen met een relatieve opvullingZoals we zien, definiëren we de eigenschappen opvulling van elke klasse met percentagewaarden in plaats van vaste waarden met metingen in pixels, op deze manier geeft de stijlinterpreter van de browser een meting die overeenkomt met de waarde die we hebben geplaatst, aan het einde wanneer we ons voorbeeld zien in de browser krijgen we het volgende: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.
VERGROTEN
Als we nu de grootte van het venster verkleinen, zullen we zien hoe een aanpassing wordt gemaakt, maar met behoud van een proportionele afstand van de tekst tot de randen:
We merken dan hoe ons ontwerp wordt onderhouden en vervorming voorkomt door de resolutie van de persoon die het bevat te verminderen, waardoor een consistente ervaring voor onze gebruiker behouden blijft.
Hoewel er meer geavanceerde concepten zijn die we in andere tutorials zullen bespreken, kunnen we met deze paar trucs of tips erin slagen om onze oude sites nieuw leven in te blazen, en nu veel meer dan zoekmachines zoals Google Ze vragen ons om een mobiele versie om ons voorkeuren in de resultaten te kunnen geven. Het belangrijkste om geweldige resultaten te bereiken is om te experimenteren en veel te blijven oefenen, zodat deze oplossingen vanzelf uit ons hoofd komen en niet altijd onze toevlucht hoeven te nemen tot gidsen.
Hiermee sluiten we deze tutorial af, omdat we zien dat we geen raamwerk nodig hebben om resultaten te bereiken snel reagerend, en we hoeven de combinatie ook niet te verlaten HTML + CSSHet enige is dat als we onze eigen tools moeten bouwen, de voldoening van het verbeteren van ons ontwerp een grote beloning is.
