Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

responsiva websidor

1
Skriv svar
Permalänk
Medlem ★
●

responsiva websidor

Jag lärde mig HTML/CSS för massor med år sedan (HTML4 & CSS2). På den tiden fanns knappt smartphones och tablets och det svåraste var att få en sida att se likadan ut i Chrome, Firefox och Internet Explorer.

Nu försöker jag läsa ikapp vad jag missat det senaste decenniet.
HTML5 och CSS3 är inte så svårt (om man redan kan HTML4/CSS2).
Det som ställer till det för mig är smartphones och tablets.

Jag förstår grunden med viewport och @media och har t.o.m. lyckats göra en testsida utan problem.
Vad jag inte lyckas hitta är en vettig guide för vilka brytpunkter man ska ha för olika @media, så det ser bra ut på stora skärmar, små skärmar, tablets, smartphones.

Ja, jag har googlat.
Ja, jag hittar massor med sidor/guider hur man ska göra.
Problemet är att alla säger olika saker och jag vet inte vilken guide jag ska använda.

Kan någon vänlig person länka till en bra guide och förklara varför den guiden är bättre än andra.
Alternativt ge ett kod-exempel på CSS med @media?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Vet inte om det finns nåt "ska ha". Men titta på hur andra gör det är mitt tips

Exempelvis: https://mui.com/material-ui/customization/breakpoints/#defaul...

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av anthra:

Problemet är att alla säger olika saker och jag vet inte vilken guide jag ska använda.

Kan någon vänlig person länka till en bra guide och förklara varför den guiden är bättre än andra.
Alternativt ge ett kod-exempel på CSS med @media?

Gå till inlägget

Det är väl det som är grejen: det finns inga magiska brytpunkter som gör att alla olika slags webbplatser med alla olika slags innehåll ser perfekta ut på alla slags mobila enheter med alla olika slags upplösningar. Du får försöka hitta de brytpunkter som passar så bra som möjligt för just din webbplats med just ditt innehåll riktade mot just din eventuella mobila målgrupp.

Som du märkt redan så föreslår olika CSS-ramverk olika brytpunkter:

MaterialUI föreslår:
    xs, extra-small: 0px
    sm, small: 600px
    md, medium: 900px
    lg, large: 1200px
    xl, extra-large: 1536px

Tailwind CSS föreslår:
    sm 640px @media (min-width: 640px)
    md 768px @media (min-width: 768px)
    lg	1024px @media (min-width: 1024px)
    xl	1280px @media (min-width: 1280px)
    2xl 1536px @media (min-width: 1536px)

Du får experimentera helt enkelt tills att du hittar det du upplever är "good enough".

Mvh,
WKL.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av anthra:

Jag lärde mig HTML/CSS för massor med år sedan (HTML4 & CSS2). På den tiden fanns knappt smartphones och tablets och det svåraste var att få en sida att se likadan ut i Chrome, Firefox och Internet Explorer.

Nu försöker jag läsa ikapp vad jag missat det senaste decenniet.
HTML5 och CSS3 är inte så svårt (om man redan kan HTML4/CSS2).
Det som ställer till det för mig är smartphones och tablets.

Jag förstår grunden med viewport och @media och har t.o.m. lyckats göra en testsida utan problem.
Vad jag inte lyckas hitta är en vettig guide för vilka brytpunkter man ska ha för olika @media, så det ser bra ut på stora skärmar, små skärmar, tablets, smartphones.

Ja, jag har googlat.
Ja, jag hittar massor med sidor/guider hur man ska göra.
Problemet är att alla säger olika saker och jag vet inte vilken guide jag ska använda.

Kan någon vänlig person länka till en bra guide och förklara varför den guiden är bättre än andra.
Alternativt ge ett kod-exempel på CSS med @media?

Gå till inlägget

Ett bra utgångsläge är att webbsidor generellt är responsiva innan CSS och tänka mobil först. Problemen börjar ofta med onödig CSS, men media har en plats men bör inte vara utgångsläge. Om du behöver uppdatera dig så kan jag rekommendera Kevin Powell på YouTube för CSS samt en av hans gratiskurser som innebär liten lektion eller utmaning per dag. Jag länkar två videos som jag verkligen rekommenderar!

https://courses.kevinpowell.co/conquering-responsive-layouts

Visa signatur

[ Sony 65" XE9305 + LG SJ9 | PS5 ] [ Samsung Galaxy Z Flip 4 ]
[ Ryzen 5800X3D | Arctic Freezer 34 eSports Duo | MSI B450 Tomahawk MAX | 4x8GB 3200MHz G.Skill TridentZ | Sapphire RX5700 XT Nitro+ | Kingston NV2 M.2 2TB | Corsair RM750X V2 ] [ LG 34WN750-B ]

Redigera
Citera flera Citera
1
Skriv svar