I moment 6 – responsiv deign har jag gjort två versioner av Markdown sidan från moment 3. I den första varianten som du hittar här använde jag mig av tenkniker så som relativa enheter, media queries, flexbox/grid och css variabler för att göra sidan responsiv till olika användarenheter.
Jag tycker inte att något var särskilt utmanande. Jag har använt flex/grid ganska mycket innan moment 6 och använder det bekvämt. Även resterande kunskaper har jag bekantat mig med till en viss del innan och hade inga större problem med att implementera. För att få responsivitet för olika skärmar har jag för det mesta använt media queries.
Den andra varianten jag gjorde av markdown så använde jag mig av ramverket materialize, det kan du hitta här. Jag kompletterade även med lite egen CSS för lite småsaker jag inte kunde göra med materialize, till exempel göra så att <body> element inte tar upp 100% av bredden vid stora skärmar.
Här är resultat för Markdown sidan innan några förändringar: Det står att sidan är mobilanpassad men som vi kan se det beter den sig konstigt.
Resultat för Responsiv Markdown sida: Man kan de att sidan är bättre anpassad för små skärmar.
Resultat av Markdown gjort med materialize: Av någon anledning så är huvudrubriken svart, inte centrerad och väldigt liten vilket den inte är på en faktiskt mobilenhet.
Leave a Reply