Hjälp med att anpassa hemsida så den blir responsiv

Trädvy Permalänk
Medlem
Registrerad
Jun 2012

Hjälp med att anpassa hemsida så den blir responsiv

Tjena!

Blev nyligen klar med Webbutveckling 1 men jag hade tänkt att "studera" vidare på egen hand för att lära mig mer. Vi har bara lärt oss dom absoluta grunderna. Så jag vet ungefär hur man gör en fungerade hemsida, mitt största problem just nu är att allt är satt på en viss width osv. Så om jag skulle öppna hemsidan på en annan dator med större/mindre res på skärmen kommer hela hemsidan see skit ut.

Jag vill börja att anpassa mina gamla hemsidor som vi fick i uppgifter under året. Jag har dock inte möjligheten att posta mig källkod här då samma uppgifter används varje år och eleverna jag vet att läraren ibland rekommenderar SweC som hjälp när man har fastnat. Men om någon kan tänka sig att läsa igenom min kod på en eller 2 hemsidor jag har skapat så skulle det uppskatas enormt att få lite tips vad jag gör fel/kan göra bättre.

Iom att jag inte kan posta min kod så får jag väll försöka beskriva mitt största problem som jag vill fixa. I min css har jag satt width och height på alla olika "lådor" vilket leder till att hemsidan blir "statisk"(i brist av bättre ord). tex så är main kanske 1600x1200 eller dylikt och det är det även om jag ändrar storleken på min webbläsare eller zoomar in/ut med hjälp av webbläsaren. Hur kan jag bestämma bredden på en låda om jag vill att den ska vara x px bred när jag är på en 1920x1080 och minskar med x% när jag öppnar hemsidan på en 1680x1050 skärm?

Mvh Patric!

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

Kika på Bootstrap. Enkelt att använda och sidan blir väldigt responsiv.

annars går det ju i css att använda

@media screen and (min-width: 480px) { blablalvb }

etc

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Medlem
Registrerad
Aug 2014

Testa med media alternativ använd dig av % istället för px.

GTX 1080, Intel 5930K 4.0GHZ, Noctua NH-D15,ASUS X99 DELUXE, 16GB DDR4 Corsair, Fractal design r5, Corsair AX 1200i, Samsung 950 256GB, 1TB HDD.

AMD r9 280X Vapor-X, AMD 8350@4.4GHZ, 212 EVO,Gigabyte GA-970A-DS3P , 8GB DDR3 Corsair, Zalman Z11+, EVGA 500W, 120GB kingston v300 SSD, 1TBSeagate HDD.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Det enklaste är att lära dig använda en grid, css ramverk som är byggda för modern webb.
Dvs, du behöver inte koda egna bredder och responsiva divar, utan du hämtar CSS klasserna direkt från ramverket.
Dessa två är väldigt populära. Kan du den ena kan du den andra mer eller mindre. Den enda kunskapen du behöver är att läsa deras dokumentation om hur man använder klasserna.

http://foundation.zurb.com/
http://getbootstrap.com/

Kolla på min egenkodade grid så ser du ungefär hur en responsiv grid fungerar (gammalt nerlagt projekt av mig)
http://fredrikw.se/work/grid/

En videolista för att komma igång med Foundation
https://www.youtube.com/watch?v=HUZlYKiXMAQ&list=PLqGj3iMvMa4...

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780