Trädvy Permalänk
Medlem
Plats
Katrineholm
Registrerad
Aug 2013

CSS scaling

Hej sweclockers!

Jag håller på att göra en webbsida som ett litet sidoprojekt medans jag går gymnasiet. Mestadels jobbar jag med macbooken jag fått av skolan men jag jobbar också med stationära här hemma när jag får chansen.

Mitt problem: hemsidans layout blir konstig när jag skiftar mellan mac-hemPC och jobbar med koden. sidan blir oproportionell med andra datorer är vad jag försöker få fram här. Finns det någon kod/metod som gör att koden "korrigerar sig" efter vilken dator den är på?

https://jsfiddle.net/Lgx03cpf/3/

Trädvy Permalänk
Medlem
Registrerad
Jul 2015

@Miniturtlex: Vet inget om koden men du kanske kan använda em istället för px på text t.ex.

Men utan koden blir det ju knöligt. Olika webbläsare också förstås?

Trädvy Permalänk
Medlem
Plats
Bålsta
Registrerad
Nov 2010
Skrivet av Miniturtlex:

Hej sweclockers!

Jag håller på att göra en webbsida som ett litet sidoprojekt medans jag går gymnasiet. Mestadels jobbar jag med macbooken jag fått av skolan men jag jobbar också med stationära här hemma när jag får chansen.

Mitt problem: hemsidans layout blir konstig när jag skiftar mellan mac-hemPC och jobbar med koden. sidan blir oproportionell med andra datorer är vad jag försöker få fram här. Finns det någon kod/metod som gör att koden "korrigerar sig" efter vilken dator den är på?

Om du använder Chrome, Firefox eller Safari kan du utesluta att du använder för nya standarder som inte stöds av till exempel Internet Explorer 9.

Jag misstänker att ditt problem är att du försöker skriva en fixerad layout i pixlar. Typ att left-column ska vara exakt 320px bred. Det är rätt dålig pratik. Istället bör du kolla på Responsiva eller adaptiva lösningar.

Responsiva lösningar är när du använder % istället för px för bredd.
Adaptivt så arbetar man med media queries för att visa olika layouter beroende på skärmupplösning, enhetstyp, pixeldensitet etc.

Slå ett öga på Bootstrap som är ett trevligt ramverk för att bygga responsiva och adaptiva lösningar.

Jag kan också tillägga att det är väldigt vanligt att man blandar reponsiva lösningar med adaptiva. Siten kan vara responsiv för olika dekstop upplösningar, men när man kommer ned till ca 450 pixlar så går man över till en mobil layout.

edit: HTML är inte kod CSS är väl i gränslandet till att benämnas som kod dock!

~. Citera så jag hittar tillbaka .~

Trädvy Permalänk
Medlem
Plats
Katrineholm
Registrerad
Aug 2013
Skrivet av sky90:

@Miniturtlex: Vet inget om koden men du kanske kan använda em istället för px på text t.ex.

Men utan koden blir det ju knöligt. Olika webbläsare också förstås?

Ska testa att använda em!
Kör samma webbläsare på båda datorer.

Skrivet av KeVVa:

Om du använder Chrome, Firefox eller Safari kan du utesluta att du använder för nya standarder som inte stöds av till exempel Internet Explorer 9.

Jag misstänker att ditt problem är att du försöker skriva en fixerad layout i pixlar. Typ att left-column ska vara exakt 320px bred. Det är rätt dålig pratik. Istället bör du kolla på Responsiva eller adaptiva lösningar.

Responsiva lösningar är när du använder % istället för px för bredd.
Adaptivt så arbetar man med media queries för att visa olika layouter beroende på skärmupplösning, enhetstyp, pixeldensitet etc.

Slå ett öga på Bootstrap som är ett trevligt ramverk för att bygga responsiva och adaptiva lösningar.

Jag kan också tillägga att det är väldigt vanligt att man blandar reponsiva lösningar med adaptiva. Siten kan vara responsiv för olika dekstop upplösningar, men när man kommer ned till ca 450 pixlar så går man över till en mobil layout.

edit: HTML är inte kod CSS är väl i gränslandet till att benämnas som kod dock!

Väldigt bra förklaring av mitt problem, tack tack! Hade ingen aning att % och em fanns som alternativ ..