Responsive design: Vilka max-width ska man använda till mobiler, paddor och datorskärmar?

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

Responsive design: Vilka max-width ska man använda till mobiler, paddor och datorskärmar?

Hejsan. Jag håller på att lära mig responsive design. Jag har gått igenom nu och fattat hur det hela funkar gillar det systemet w3 använder att man gör en @media för varje device som mobil, padda och skärm men jag gillar dock inte att de gör en massa .col klasser då det är onödigt mycket kod när man kan sätta egen width på just den diven som ska vara mindre vid det här tillfälllet eller jag har förstått det fel? I alla fall frågan lyder: Finns det standard width man kan använda sig av när man ska sätta width på mobil, paddar och skärmar? Jag menar det är 3 olika och det ska ju hända 3 olika saker vid 3 olika skärmstorlekar.

Källa: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Trädvy Permalänk
Inaktiv
Registrerad
Feb 2006
Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@anon81912: Det här gav inte så mycket svar på frågan då detta är classer som bootstrap sidan och skapat själva och som bara finns i deras script och inte officiellt i html/css.

Trädvy Permalänk
Medlem
Registrerad
Jun 2014
Trädvy Permalänk
Inaktiv
Registrerad
Feb 2006
Skrivet av Ikasera:

@Killbom: Det här gav inte så mycket svar på frågan då detta är classer som bootstrap sidan och skapat själva och som bara finns i deras script och inte officiellt i html/css.

Japp. Det är ett verktyg som gör vad du vill göra enklare. Vill du göra det med ren HTML och CSS får du harva jättemycket, det är därför i princip ingen gör det.

Verktyg såsom bootstrap är byggda för att göra det enkelt att göra responsiv design och det är sådana verktyg som används i verkligheten. Det är lika bra att lära sig dem.

Det är dessutom fint att verktygen uppdateras om det kommer nya device standarder, när upplösningarna ökar och så vidare. Numera är det rätt värdelöst att använda pixlar då telefoner kan ha mycket hög upplösning men ändå en liten skärm. Du vill ju visa samma sida på en iPhone som på en Galaxy S7. Då är det väldigt bra att typ bootstrap för att få rätt på det.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2013
Skrivet av Ikasera:

Finns det standard width man kan använda sig av när man ska sätta width på mobil, paddar och skärmar? Jag menar det är 3 olika och det ska ju hända 3 olika saker vid 3 olika skärmstorlekar.

Finns inte direkt någon standard utan du får köra på det som passar in för ditt content.
Med det sagt kan jag visa vad jag brukar använda för @media rules

@media (max-width: 767px)
@media (min-width: 768px) and (max-width: 1018px)
@media (max-width: 1018px) and (min-width: 768px)

De passar i mitt arbete (sitter inhouse med vårt egna content).
Om du använder Chrome finns deras väldigt roliga "simulator" för olika devices,
(F12 > ctrl + shift + m).

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2013
Skrivet av anon81912:

Verktyg såsom bootstrap är byggda för att göra det enkelt att göra responsiv design och det är sådana verktyg som används i verkligheten. Det är lika bra att lära sig dem.

Jag hade inte valt att bygga ett eget responsivt ramverk.
När det finns så många bra, så är det ingen idé att göra ett eget.

Men om detta är för att lära sig grunderna så är det ett utmärkt sätt att lära sig från botten till toppen

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016

@Lolpold: Tack för bra svar precis vad jag sökte Tyvärr är jag envis och vill bygga min egen bootstrap och kommer göra det för att lära mig och för att det är kul

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2013
Skrivet av Ikasera:

@Lolpold: Tack för bra svar precis vad jag sökte Tyvärr är jag envis och vill bygga min egen bootstrap och kommer göra det för att lära mig och för att det är kul

Helt rätt! Jag startade precis så när jag började
Det är ett perfekt sätt att lära sig på.
Självklart är det smidigt att använda ett ramverk, men då lär du dig bara ett ramverk och inte hur exakt det fungerar!

En rolig övning kan dock vara sen att försöka efterlikna det du byggt i ett css ramverk för att kunna förstå vad du byggt och hur sedan de andra utvecklarna byggt sitt!

Trädvy Permalänk
Avstängd
Registrerad
Apr 2016
Skrivet av Lolpold:

Helt rätt! Jag startade precis så när jag började
Det är ett perfekt sätt att lära sig på.
Självklart är det smidigt att använda ett ramverk, men då lär du dig bara ett ramverk och inte hur exakt det fungerar!

En rolig övning kan dock vara sen att försöka efterlikna det du byggt i ett css ramverk för att kunna förstå vad du byggt och hur sedan de andra utvecklarna byggt sitt!

Varför skulle jag inte förstå vad jag bygger? Vad menar du med ett ramverk? Jag bygger ju det den vägen som jag vill att det ska fungera.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Nov 2013
Skrivet av Ikasera:

Varför skulle jag inte förstå vad jag bygger? Vad menar du med ett ramverk? Jag bygger ju det den vägen som jag vill att det ska fungera.

Självklart förstår du nog vad du bygger, men jag är osäker på om du någonsin kommer att kunna lägga lika mycket tid som Bootstraps-utvecklare lagt på deras css ramverk.

http://getbootstrap.com/

Då kan du hitta nya roliga och lärorika tekniker!