Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Responsiv webbdesign med media queries

Ursäkta mitt ”Hallå” i början, det är alltid lite tricky att veta när det börjar spelas in, då den reagerar på ljud till att börja med…
Det här tipsat kan vara lite mycket att ta in, även jag kan tycka att det är jobbigt med @media queries, för att det ibland kan vara lite svårt att greppa. Men det kan vara bra att försöka hänga med på filmen ovan där jag förklarar väldigt ingående hur och vad man gör.

Först och främst; en introduktion i vad responsivt är. Responsivt är att bloggen anpassar sig till olika enheter så som en bred skärm, en surfplatta, en mobil och ett vanligt skrivbord. Många har kommenterat om att deras bloggar inte ser likadana ut i mobilen till exempel, utan att man får zooma ut eller liknande – det här är lösningen för att få till en blogg som ser snygg ut i alla enheter. Jag vill dock påpeka att vi inte menar att den ser likadan ut i alla enheter, då responsivt betyder att det är anpassat till olika skärmstorlekar. På en mobil kanske det behövs större text till exempel, då du ska göra detta för att läsaren får en bättre upplevelse, oavsett enhet.

Koden:

/* Stora enheter, bred skärm */
@media only screen and (max-width: 1200px) {
  
}

/* Mediumstora enheter, skrivbord */
@media only screen and (max-width: 992px) {
  
}

/* Små enheter, surfplattor */
@media only screen and (max-width: 768px) {
  
}

/* Extra små enheter, mobiltelefoner */
@media only screen and (max-width: 480px) {
  
}

Ovan har vi alltså fyra queries, som ni ser i varje kommentar (orange text). Efter varje förklaring kommer brackets (alltså { }) och det viktiga är att man håller sig innanför dessa i varje query. Här är det också en bra idé att bli en hejare på indentering – klicka här för att se film och förklaring om vad indentering är, så att du håller koll på att du verkligen håller dig inom dina brackets. Om du inte gör detta kan du lätt tappa bort dig och därmed skriva för få eller för många brackets, och därmed kommer det inte fungera. Nedan finns ett exempel i alla fall.

Exempel:

/* Extra små enheter, mobiltelefoner */
@media only screen and (max-width: 480px) {
  #wrapper {
  	width: 100%;
  }
  #content {
  	width: 100%;
  }
  
  #side {
  	width: 100%;
  }
  
  #header {
  	width: 100%;
  }

  .entrybody {
        font-size: 14px;
  }  
}

Så kort och gott, allt som behövs modifieras i en surfplatta eller mobil, lägger man inom { } i varje media query. För bredd och höjd används istället för pixlar, procent i sådana här lägen, så använd 100% istället för 1000px till exempel.

Jag förstår att det kan vara mycket att ta in, men jag hoppas verkligen att jag gett er lite kött på benen, har ni frågor är ni varmt välkomna att ställa dem här nedan!

 

Transkribering av filmen:

Responsivt med media queries

Hallå. Hej.
Vi har fått in ganska mycket frågor om det här med att mobilanpassa sin blogg, blogg.se har ju så att användare kan använda en typ av tema som de har för att de ska bli lättare att läsa från mobilen. Saken är att det inte alls är anpassat till hur designen ser ut i vanliga fall så det kan vara lite tråkigt att använda den. Och responsivt då betyder det alltså att en blogg anpassar sig efter hur stor enheten som användaren är på är. Så om man inte har en responsiv blogg så ser så ser den ofta ut så här i en iPhone till exempel, att man får liksom dra åt sidorna och det, det blir liksom ingen, igen trevlig användarupplevelse. På en padda kan den se ut så här.

Visst det är lite bättre men man får fortfarande scrolla åt sidorna och vi vill undvika att scrolla åt sidorna. Vi vill liksom att bloggen ska ta upp hela det här och sen lite längre ner så kommer menyn. Och då kan man använda något som heter Media Queries och det är css som man lägger in i stilmallen. Det här ska fungera på alla typer av webbplatser så det gäller inte bara blogg.se. Men jag kommer visa det på blogg.se. Och då är det som så att man använder fyra olika stycken och de ser ni lite längre ner här i inlägget. Och då har vi, oj, ska vi se, om jag kan få fram dem här. Här har vi dem. Så om jag lägger in dem här i stilmallen på min blogg.se blogg som inte är responsiv så ser ni att vi har fyra olika stycken.

Grå text det indikerar att det är en kommentar, så det förklarar bara vad det nedan är för någonting. Så den första är stora enheter med bred skärm. Det är en enhet som har en lite bredare skärm en vad en vanlig dator har. Sen har vi medium-stora enheter och skrivbord, det är en vanlig, vanlig dator med skärm skulle man kunna säga. Sen så har vi små enheter som är surfplattor alltså en iPad eller något annan typ av tablet och sen sist men inte minst så är det extra små enheter och det är ju då mobiltelefoner eller smartphones.  Jag brukar inte använde de två översta utan jag brukar bara fokusera på att optimera min sida för surfplattor och mobiltelefoner därför att om man har använt automatiserade koder för margin i sin blogg så ska den anpassa sig till stora enheter och medium stora enheter och med så menar jag att alltså att man har till exempel under #wrapper i sin blogg så kan man ha margin:60px auto då anpassar den sig ut efter hur bred skärmen är. Så jag gör som så att jag tar bort detta och fokuserar helt enkelt bara på surfplattorna och mobiltelefonerna . Och då är det som så att då har man liksom den här lilla grejen här, ni ser att det är en bracket här och det är en bracket här och innanför där så deklarerar man helt enkelt hur man vill att bloggen ska se ut.

Då börjar vi med en surfplatta tänkte jag. De stora sakerna som wrapper content side, alltså det stora hela, inläggsbiten och, och side det är menyn, det, det blir i princip samma för både surfplattor och mobiltelefoner, men jag börjar skriva här i alla fall. Och då lägger jag helt enkelt bara in regeln för wrapper men jag modifierar den och det betyder alltså att om, om enheten som besökaren använder för just det besöket har en maxbredd på 768 pixlar då ska bloggen istället se ut så här. Och då gör jag som så att jag börjar med wrapper och så lägger jag in en bredd, alltså width, och här använder vi procent istället för pixlar. Och sedan så lägger jag in content och anledningen till att jag lägger in 100% på wrapper det är för att jag vill att wrapper ska ta upp 100% utav skärmen. Content lägger jag en 90% då tar den upp 90% utan wrapper som, så om det finns till exempel en padding på wrapper så kommer content att anpassa sig efter det. Sedan gör jag samma sak med side, vill att även den ska ta upp 90% utav wrapper, så lägger in width 90%. Det här kan jag ju inte garantera att det är samma sak för varje blogg, eller för varje webbplats utan man får testa sig fram och se hur man vill göra och det är ju inte alltid reglerna heter samma sak heller.

Man får helt enkelt testa sig fram och se hur man gör, det här är ett rätt avancerat tips så för er som inte har liksom har 100% koll så kan det vara så att det inte riktigt går smärtfritt till men då är ni välkomna att ställa frågor i kommentarsfältet. Så jag gör som så att jag kopierar detta, så, och lägger även det inom mobiltelefonerna här. Det viktiga är alltså att man håller sig inom den här och den här för varje device eller enhet. Och sedan är det bara att börja modifiera de andra, de andra delarna också. På en mobiltelefon till exempel kanske jag vill ha lite högre, lite större text, då lägger jag helt enkelt in entrybody som är regeln för inläggstexten i den här, i det här temat. Och så skriver jag font-size och så ökar jag den lite då, 17px. Och det betyder alltså att om personen  som besöker sidan går in via mobiltelefon så kommer font-sizen vara 17 pixlar. Om personen däremot går in via en vanlig dator så kommer det vara det som vi har deklarerat högre upp här i den vanliga stilmallen.

Sen håller man helt enkelt på så. Jag kommer även visa hur man kan optimera headern så att den anpassar sig. Man kan börja med att lägga 100% till exempel, är det så att den inte anpassar sig utan att den liksom hoppar, att den bara tar en liten bit av headern så kan ni kolla på det tipset som jag ämnar göra inom kort här. Så vi tar en bredd på headern också. Nu har jag ju ingen header i den här testbloggen, så det kommer inte att hända någonting, men jag lägger den på en bredd på 100 pixlar. Det fina med, förlåt 100%. Det fina med procenten här det är att man kan använda mer än 100%, alltså man kan lägga 110%, 150% om man vill att det ska vara större än skärmen, men det vill man ju sällan. Däremot så kan man ibland kanske behöva lägga kanske 110% på ett element som ligger inuti ett element för att det ska gå enda it i kanten.

Det i det stora hela liksom hur man gör och sen så får man helt enkelt bara sitta och testa sig fram och använd gärna iPad peek och iPhone peek här och se hur det blir liksom. Så om jag uppdaterar här nu så ska det, fast nu kanske jag inte hann spara den, ska vi se. Nej, det hann jag inte. Ursäkta att jag dröjer lite här det är bara att när jag har igång det här inspelningsverktyget så blir det inte alltid, det vill uppdatera sig så snabbt. Så, vi provar igen här, ska vi se. Ja, då ser ni att då har det liksom anpassat sig här men då har siden hoppar ut här medan den ligger här och då får man helt enkelt bara sitta och försöka modifiera, kanske ska man lägga 100% ändå på content och side och se hur det blir. Det är liksom, det är ju från blogg till blogg helt enkelt, vad man har använt för marginaler och paddings tidigare. Men det var i alla fall det som jag hade tänkt visa er idag och så om det är så att ni har några fler frågor så ställ jättegärna dem i kommentarsfältet så får jag i så fall utveckla den här videon mer ut efter era frågor. Jag får tacka så mycket. Ha det så gott, fortsatt trevlig helg. Hejdå.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *