Jag har ändrat min startsida och gjort den responsiv med hjälp av relativa enheter, media queries och flexbox. Med hjälp av ramverket Materialize har jag gjort en ny version av min gamla Markdown-sida.
Relativa enheter
Tidigare använde sig alla textelement på min startsida av absoluta textstorleksenheter i pixlar, vilket visade sig vara ett problem på mindre enheter eftersom texten oftast inte fick plats på skärmen. Nu använder sig majoriteten av texten rem-enheten vilket gör det mycket smidigt att anpassa textstorleken av all text endast av att ändra font-size för HTML-elementet.
Flexbox
Först kände jag att jag inte behövde använda flexbox, men sen insåg jag att min projektlista var onödigt pillig och kunde förenklas med hjälp av flexbox. Innan använde jag mig av float för att lägga knapparna åt höger eller vänster, men nu med hjälp av flexbox anpassas de automatiskt och tar den plats de behöver. Detta gör att på breda skärmar ligger knapparna i två kolumner medan på smalare skärmar ligger de endast i en kolumn, vilket håller det lättläst.
Media query
Media queries var det krångligaste att fixa eftersom de kräver att man pillar med många inställningar för olika skärmbreddar. I mitt fall hittade jag fem olika breakpoints för skärmbreddar på nätet som jag bestämde mig för att använda:
- Smal mobil: 0-640
- Mobil: 640-768
- Surfplatta: 768-1024
- Laptop: 1024-1280
- Skrivbord: 1280+
Eftersom det är så många så ändrar jag inte särskilt många egenskaper per skärmbredd; den mest märkvärdiga är font-size på HTML-elementet. Som tidigare nämnt använder jag rem-enheten på nästan all text, vilket gör att all textstorlek ändras med endast några rader kod.
Resultat
Före:
Efter:
Detaljerad bild:
Före:
Efter:
Som ni ser är det en självklar förbättring i mobilvänligheten.
Ramverk
Jag bestämde mig för att använda ramverk för MarkDown-sidan istället för min landing page eftersom jag ville lära känna ramverket på en simpel sida och se vad jag kan göra med det.
Jag har testat ramverket Materialize och försökt göra om sidan. Här kan du se resultatet:
Strukturen är identisk till den förra sidan, men den nya ser annorlunda ut på några ställen. Mitt mål med uppgiften var att endast hålla mig till ramverket CSS-mässigt, men det gör att jag inte har lika mycket kontroll över varje element som jag hade innan, vilket är mest tydligt i tabellen. Ramverk kan vara väldigt smidiga ifall man vet hur man ska använda dem effektivt, men själv känner jag att det är enklare att skriva egen CSS-kod med tanke på hur mycket mer kontroll man har. Vissa kan tycka att man kan använda både ramverk och egen CSS, men jag tycker att det tar bort hela poängen med att använda ramverk från första början.
Lämna ett svar