Veel studenten van responsief webontwerp hebben moeite met het gebruik van percentages voor breedtewaarden. Concreet bestaat er verwarring over hoe de browser die percentages berekent. Hieronder vindt u een gedetailleerde uitleg over hoe percentages werken voor berekeningen van de breedte in een responsieve website.
Pixels gebruiken voor breedte-waarden
Wanneer u pixels als breedtewaarde gebruikt, zijn de resultaten zeer eenvoudig. Als u CSS gebruikt om de breedtewaarde van een element in de kop van een document in te stellen op 100 pixels breed, heeft dat element dezelfde grootte als een element dat u instelt op 100 pixels breed in de inhoud van de website of in het voettekstgedeelte of in andere delen van het document. pagina. Pixels zijn een absolute waarde, dus 100 pixels is 100 pixels, ongeacht waar in uw document een element wordt weergegeven. Helaas zijn pixelwaarden gemakkelijk te begrijpen, maar ze werken niet goed met responsieve websites.
Ethan Marcotte bedacht de term "responsive web design", waarbij deze aanpak werd uitgelegd als zijnde 3 sleutelprincipes:
- Een vloeibaar raster
- Vloeiende media
- Mediaquery's
Die eerste twee punten, een vloeistofraster en vloeibare media worden bereikt door percentages, in plaats van pixels, te gebruiken voor het bepalen van de waarden.
Percentages gebruiken voor breedte-waarden
Wanneer u percentages gebruikt om een breedte voor een element in te stellen, varieert de werkelijke grootte van dat element naargelang afhankelijk van waar het zich in het document bevindt. Percentages zijn een relatieve waarde, wat betekent dat de weergegeven grootte relatief is ten opzichte van andere elementen in uw document.
Als u bijvoorbeeld de breedte van een afbeelding instelt op 50%, doet u dit niet betekent dat de afbeelding wordt weergegeven op de helft van de normale grootte. Dit is een veel voorkomende misvatting.
Als een afbeelding oorspronkelijk 600 pixels breed is, betekent het gebruik van een CSS-waarde om het op 50% weer te geven niet dat het in de webbrowser 300 pixels breed is. Deze percentagewaarde wordt berekend op basis van het element dat die afbeelding bevat, niet de native grootte van de afbeelding zelf. Als de container (die een indeling of een ander HTML-element kan zijn) 1000 pixels breed is, wordt de afbeelding weergegeven op 500 pixels, omdat die waarde 50% van de breedte van de container is. Als het element 400 pixels breed is, wordt het beeld alleen weergegeven bij 200 pixels, omdat die waarde 50% van de container is. Het beeld in kwestie heeft hier een 50% -grootte die volledig afhankelijk is van het element dat het bevat.
Onthoud dat responsief ontwerp vloeiend is. Lay-outs en formaten worden gewijzigd als de schermgrootte / het apparaat verandert. Als je hierover nadenkt in fysieke, niet-webtermen, is het net of je een kartonnen doos hebt die je met verpakkingsmateriaal vult. Als je zegt dat de doos voor de helft gevuld moet zijn met dat materiaal, is de hoeveelheid verpakking die je nodig hebt afhankelijk van de grootte van de doos. Hetzelfde geldt voor percentagebreedten in webontwerp.
Percentages op basis van andere percentages
In het voorbeeld van de afbeelding / container gebruikten we pixelwaarden voor het bevattende element om te laten zien hoe de responsieve afbeelding zou worden weergegeven. In werkelijkheid zou het bevattende element ook worden ingesteld als een percentage en de afbeelding of andere elementen binnen die container zouden hun waarden krijgen op basis van een percentage van een percentage.
Hier is nog een voorbeeld dat dit in de praktijk laat zien.
Stel dat u een website heeft waar de volledige site zich bevindt binnen een divisie met een klasse van "container" (een gemeenschappelijke webontwerppraktijk). Binnen die divisie bevinden zich drie andere divisies die u uiteindelijk als 3 verticale kolommen wilt weergeven. Die HTML ziet er misschien zo uit:
Nu kunt u CSS gebruiken om de grootte van die "container" -divisie in te stellen op 90%. In dit voorbeeld heeft de containerdeling geen ander element dat eromheen ligt, behalve de hoofdtekst, die we niet hebben ingesteld op een specifieke waarde. Standaard wordt het hoofdgedeelte weergegeven als 100% van het browservenster. Daarom is het percentage van de "container" -divisie gebaseerd op de grootte van het browservenster. Naarmate dat browservenster in omvang verandert, neemt ook de grootte van deze "container" toe. Dus als het browservenster 2000 pixels breed is, wordt deze indeling weergegeven op 1800 pixels. Dit wordt berekend als 90 procent van 2000 (2000 x .90 = 1800)), de grootte van de browser. Als elk van de "col" -divisies in de "container" is ingesteld op een grootte van 30%, dan is elk van deze in dit voorbeeld 540 pixels breed. Dit wordt berekend als 30% van de 1800 pixels die de container weergeeft (1800 x .30 = 540). Als we het percentage van die container hebben gewijzigd, veranderen deze binnenste divisies ook in de grootte die ze weergeven, omdat ze afhankelijk zijn van die het element bevatten. Laten we aannemen dat de browservensters op 2000 pixels breed blijven, maar we veranderen de procentuele waarde van de container naar 80% in plaats van 90%. Dat betekent dat het nu 1600 pixels breed zal renderen (2000 x .80 = 1600). Zelfs als we de CSS voor de grootte van onze 3 "col" -divisies niet wijzigen en deze op 30% laten staan, zullen ze nu anders worden weergegeven, omdat hun element, de context waarin ze worden gesorteerd, is gewijzigd. Die 3 divisies zullen nu elk 480 pixels breed weergeven, wat 30% van 1600 is, of de grootte van de container (1600 x .30 = 480). Als je dit nog verder zou nemen, als er een afbeelding in een van deze "col" -divisies zou zijn en die afbeelding zou met een percentage zijn bemeten, zou de context voor de dimensionering de "col" zelf zijn.Aangezien die "col" -divisie van grootte veranderde, zou ook de afbeelding erin veranderen. Dus als de grootte van de browser of de "container" is veranderd, zou dat van invloed zijn op de drie "col" -divisies, wat op zijn beurt de grootte van de afbeelding binnen de "kolom" zou veranderen. Zoals u kunt zien, zijn dit allemaal verbonden als het gaat om percentage-gestuurde dimensioneringswaarden. Wanneer u bedenkt hoe een element in een webpagina wordt weergegeven wanneer een percentagewaarde wordt gebruikt voor de breedte, moet u de context begrijpen waarin dat element zich in de opmaak van de pagina bevindt. Percentages spelen een cruciale rol bij het maken van de lay-out voor responsieve websites. Of u nu de grootte van de afbeeldingen responsief aanpast of een percentage breedte gebruikt om een echt vloeiend raster te maken waarvan de afmetingen relatief ten opzichte van elkaar zijn, het begrijpen van deze berekeningen is nodig om de gewenste look te bereiken. Samengevat
