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

CSS scaling

1
Skriv svar
Permalänk
Medlem
●

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/

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

@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?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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å?

Gå till inlägget

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!

Visa signatur

~. Citera så jag hittar tillbaka .~

Redigera
Citera flera Citera
Permalänk
Medlem
●
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?

Gå till inlägget

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!

Gå till inlägget

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara