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

Responsiv webbdesign med media queries

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

44 kommentarer

  1. SvaraMaria Larsson

    Jag har några frågor! 🙂

    1. Hur gör man så att designen är utzoomad direkt när man kommer in på bloggen på mobilen/ plattan? Har sett att vissa har så att det blir så per automatik, men jag får inte detta att fungera.

    2. Det spelar ingen roll om jag skriver att designen ska vara i %, headern kommer alltid utanför, samma sak med texten osv. Hur fixar man detta?

  2. SvaraMaria Larsson

    Har fixat det med headern, men jag får inte till det med separatorn? Den flyter ut till höger och hur jag än skriver så kortas den inte ned när jag kollar på mobilen.
    Samma problem har jag med navbar.. Går det att ta bort den på mobilen och plattan helt?


    1. Author
      SvaraSanna Preifelt

      Absolut, det går att ta bort saker. Det är bara att lägga en media query för platta och en för mobil. Sedan lägger du display:none; under navbar och separator om du inte vill att de ska synas i den upplösningen 🙂

      1. Maria Larsson

        Åh tack! Du är en ängel! 😀
        Håller på att fixa mobilversionen just nu och blir lite smått galen på att det är en .. kan man kalla det tomrum/ glipa .. till höger om designen så att man ser bakgrunden. Vill att det ska bort men vet inte hur jag ska fixa detta? Har du någon aning? Om du inte förstår hur jag menar så menar jag alltså att man inte ska kunna dra med fingret på skärmen till höger och vänster, nu när man gör det så finns det ett tomrum på höger sida. Jag har 100% width på content och wrapper men ändå hamnar saker lite utanför (tex reklamen som blogg.se har?). Hoppas du vet svaret på hur man fixar detta 🙂


      2. Author
        Sanna Preifelt

        Tyvärr kan vi inte styra reklamen som blogg.se har, utan den kommer ligga utanför så länge den inte är responsiv tyvärr /: Det är troligtvis den som skapar glipan, ja.

  3. SvaraSofie

    Hejsan!
    Jag har fixat så att min blogg ser okej ut i mobilversion, men i surfplatta blir det automatiskt samma som mobilversionen, utan att jag har gjort bloggen responsiv för surfplattor. Surfplattan och mobilen har alltså samma inställningar och hur jag än försöker kan jag inte göre bloggen responsiv för surplattan utan att ändra mobilversionens inställningar. Vad skall jag göra?

      1. Sofie

        fick det äntligen att fungera, skrev @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) för att göra bloggen responsiv för surplattor 😀

  4. SvaraLouise

    Hej!

    Superbra att någon äntligen tar upp detta! Men dessvärre får det fortfarande inte att funka? Min zoomar in på hörnet ändå.. Vart ska man placera dessa @media queries någonstans? Vart i stilmallen? Framgick ganska otydligt! Extremt tacksam för svar!

  5. SvaraMaja

    Hej! Jag har en fråga om något helt annat men behöver verkligen hjälp av någon som kan sin sak för får verkligen inte bloggen att fungera som den ska. Så fort jag skriver något mer inlägg än det som kom automatiskt när bloggen skapades så hoppar menyn ner till botten. Jag har provet att förstora allt, förminska allt. Ändrat allt storleksmässigt helt enkelt på alla sätt man kan tänka sig men den fortsätter att hoppa ner ändå. Har du någon aning om vad som kan vara fel? Funkar ju med ett inlägg men inte mer än så utan att den ska lagga upp sig och fastna där nere. Hjälp skulle verkligen uppskattas☺


    1. Author
      SvaraSanna Preifelt

      När man skriver inlägg på blogg.se så läggs det per automatik till en massa <div> & </div> Om det är för många av det ena eller andra (alltså taggar som öppnas men inte avslutas, eller avlutande taggar som inte har en öppnande tagg) så uppstår problem, för då läser bloggen nästa </div> som den avslutande taggen trots att det gäller en annan div-tagg. Ibland får man prova att ta bort och lägga till avslutande taggar (för det beror på att side läses in i content istället för utanför, vilket i sin tur beror på att content då inte är avslutat = saknas taggar osv.) Så man får kort och gott trixa med taggar, testa att lägga till fler taggar, ta bort taggar, det finns tyvärr inget generellt svar som är rätt i och med att jag inte kan se hur det blir när du publicerar ditt andra inlägg.

      1. Maja

        Skrev ett inlägg nu så du kan se hur det ser ut. Sitter och pillar med taggarna överallt nu men om detta kan få dig att se var felet kan ligga så skulle det verkligen vara underbart.

  6. SvaraMaja

    Samt hoppar inläggen bara längre och längre in på skärmen. Om du kommer på en lösning på det med så vore det minst lika underbart! Tack på förhand förresten och tack för första svaret


    1. Author
      SvaraSanna Preifelt

      Du verkar ha löst problemet med att det hoppar in och att menyn hoppar ner. Vi har tips om 3 inlägg, bara att kolla på Infinite Scroll 🙂


    1. Author
      SvaraSanna Preifelt

      Tveksamt, det du kan göra är ju att göra dina svar till egna rutor med CSS. Sedan kan du ju alltid lägga en bakgrund med en bild på dig själv så som Eirin har, fast att du gör det helt enkelt som en del av bakgrunden för svaret och sedan får du ju då fixa till svaren med CSS då så att de passar in med din bakgrundsbild. Bara ett förslag. Däremot kan du inte gå in och ändra i vad som visas och ej – alltså kan du inte lägga upp vilket datum, en bild osv och nästlade kommentarer finns inte på blogg.se (man kan alltså inte svara på ett svar eller svara på en kommentar om man inte är ägaren av bloggen). Om du vill kunna göra lite mer avancerade bloggdesigner är kanske blogspot eller wordpress bättre då det finns mer möjligheter där 🙂 Om du är intresserad alltså!

  7. SvaraSofie

    Hej Sanna!
    Jag har stora problem med detta. När jag bytte design på bloggen till blogg.se panorama-tema: ”Blocks”, härmomdagen så ser allt jättebra ut på datorn (förutom att det kom en till rubrik i headern) men på surfplatta och mobil ser det fullkomligt gräsligt ut. Headern är avkortad i mobilen och syns bara halva, och dessutom så stor bokstäverna över hela. Man ser inte menyraden till höger och det ser helt enkelt kaos ut. På surfplattan blir headern längre istället och en del av menyraden till höger är borta. Jag försökte mig på detta tips men jag är helt fullkomligt kass på bloggdesign (beundrar dig och andra som förstår er på sånt här). Men enligt blogg.se är ju deras panoramatema anpassade för mobil och surfplatta men det kan ju inte stämma då det ser fullkomligt gräsligt ut. Skulle vara så tacksam för någon slags hjälp eller något.


    1. Author
      SvaraSanna Preifelt

      Hej! Menyn ska inte synas i den mobiloptimeringen, utan de har valt att ta bort den helt. En responsiv design innebär inte att det ser ut exakt som på datorn i mobil och surfplatta, utan det innebär att man har anpassat det så att det ska vara lätt att läsa. Därmed antar jag att blogg.se valt att ta bort menyn helt, för den får helt enkelt inte plats om man ska läsa också + man måste ha infinite scroll så ingen idé att lägga den längst ner då det bara kommer nya inlägg hela tiden. Det du behöver göra är att använda detta tips som vi kommenterar på nu, och göra din headerbild mindre (max 300px bred) och sedan får du också göra texten i headern mindre. Såhär:

      @media only screen and (max-width: 479px) {
      #wrapper, #header {
      width: 300px !important; 
      } 
      #header {
      background: url(länktilldinnyabildsomärmax300px);
      }
      #header h1 {
      font-size: 30px; /* valfritt antal pixlar, eller lägg in display: none; om du inte vill att det ska synas alls, det står ju redan namnet i headerbilden */
      }
      }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
      #wrapper, #header {
      width: 460px !important; 
      } 
      #header {
      background: url(länktilldinnyabildsomärmax460px);
      }
      #header h1 {
      font-size: 30px; /* valfritt antal pixlar, eller lägg in display: none; om du inte vill att det ska synas alls, det står ju redan namnet i headerbilden */
      }
      }

      Sedan får du testa dig vidare med det du vill ändra på 🙂 Kolla vad som styr vad i kodmall och stilmall och fundera ut vad du vill göra med varje element beroende på optimering. Sedan kan du använda dig av ipadpeek.com för att kolla efter hur det blir.

  8. SvaraLouise

    Hej Sanna! Vet du hur man gör en länk klickbar bland kommentarerna? Vill kunna länka till hemsidor utan att låta andra behöva kopiera & klistra in.. Tack på förhand! ♥︎ Kram


    1. Author
      SvaraSanna Preifelt

      Tyvärr, jag tror inte det finns ngn sådan funktion hos blogg.se (fråga mig inte varför, väldigt märkligt…) 🙁

  9. SvaraSandra A

    Hejsan! Jag håller på och fixar med en ny design och skulle behöva lite hjälp med en grej ..

    Jag skulle vilja att min header ändast syntes på bloggens startsida. Nu när blogg.se har gjort om hela sitt ”kodsystem” så vet jag inte hur jag ska få bort headern från kategorisidan etc. eftersom det inte finns nån kod att klippa bort.

    Jag har hittat koder for wordpress men inga som skulle fungera på Blogg.se, kan du hjälpa mig?

    Tusen tack på förhand!

  10. SvaraHanna Victoria Sahlqvist

    Hej hej!
    Jag blir super förvirrad för det verkar inte fungera på min blogg.. Länken går till testbloggen där jag lagt in koderna osv 🙂 Otroligt tacksam för hjälp!

  11. SvaraJohanna

    Hej Sanna! Jag kan inte få content i media queries koden att bli större. Har försökt allt men det funkar ändå inte?

  12. SvaraEmma

    Hejhej!

    Jag har problem med att designen blir inzoomad på vänster hörn av min design (via surfplatta samt mobil) fastän jag placerat in koderna längst ner i stilmallen osv.. Hur får jag designen utzoomad? Tacksam för svar!

  13. SvaraEmma

    Hallå
    Via surfplattan blir inte mina bilder rätt. De går utanför bilden medan allt annat ser bra ut, vet du vad som är felet? 🙁

    1. SvaraTobbe Andersson

      Det låter som att du eventuellt kanske inte har responsivt värde under div classen image. Du har inte lämnat något bloggadress så kan inte kolla. Men om den responsiva designen fungerar i övrigt så kan du behöva lägga till några kodsnuttar i css filen under .image {

      max-width: 100%;
      height: auto;
      width: auto9; /* ie8 */

      Lägger du till den så ska det fungera kanon, dvs om den responsiva designen fungerar i övrigt. 🙂

  14. SvaraSara Myrehed

    Hej!
    Min blogg är insomad dirkekt man kommer in på den från mobilen.
    Sartest heter den. Går det att göra något åt det? Tycker inte att min blogg ser riktigt mobilanpassad ut men jag har följt dina instruktioner i videon noggrant! 🙂

  15. SvaraSara Myrehed

    Nya problem…
    Min blogg går att zooma ut & in, något jag inte vill.
    Menyn vill jag även få bort, men vet inte hur jag ska göra.
    Kan du på något sätt se mina css, (Ctrl+u) skulle verkligen behöva lite hjälp.
    Kan det bero på vilket tema man har på bloggen?

    1. SvaraSara Myrehed

      Du måste anpassa den i css koderna. Width height osv..
      Sök på anpassa dropdown på google så kanske du får fram lite mer utvecklade svar! 🙂
      Allt blir enklare om man vet vad alla koder står för men man får prova sig fram 🙂

      1. Emma

        Jag har sökt som en galning men hittar verkligen inte hur man fixar det därför kommenterade jag här.

  16. SvaraSara Myrehed

    Jag är inget proffs på design. Vet faktiskt inte vad det kan bero på..
    Har du rätt koder till rätt design?

  17. SvaraSara-Karolina

    Hej Sanna! Jag blev överlycklig när jag hittade detta inlägga då jag sitter vid en förhållandevis stor skärm när jag bloggar och konstaterade att mina bloggläsare vid mindre skärmar endast ser 70% av exempelvis headern. Dock får jag det inte alls att funka. Först och främst, om jag använder mig av margin:60 px auto; för att få bloggen att anpassa sig efter skärmar så är det enda som händer att wrappern flyttas ned 60 px från toppen.. Och de 4 media querie-koderna fungerar inte heller. Får panik! Finns det någon möjlighet att du kanske kan titta på mina koder för att se vad felet är, för jag förstår ju att det är svårt så här när jag bara säger att ingenting funkar, haha!

  18. SvaraAlice

    Hej Sanna. Jag får inte det alls att fungera. Det händer ju inget när jag lägger in koderna. Har lagt in detta längst ner i stilmallen

    @media only screen and (max-width: 479px) {
    #wrapper, #header {
    width: 300px !important;
    }
    #header {
    background: url(https://cdn1.cdnme.se/4669811/9-3/miniheader_560ea0bf2a6b228ece92cfb6.jpg);
    }
    #header h1 {
    display: none;
    font-size: 30px; /* valfritt antal pixlar, eller lägg in display: none; om du inte vill att det ska synas alls, det står ju redan namnet i headerbilden */
    }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    #wrapper, #header {
    width: 460px !important;
    }
    #header {
    background: url(https://cdn2.cdnme.se/4669811/9-3/miniheader_560ea1199606ee15d061b31e.jpg);
    }
    #header h1 {
    display: none;
    font-size: 30px; /* valfritt antal pixlar, eller lägg in display: none; om du inte vill att det ska synas alls, det står ju redan namnet i headerbilden */
    }
    }
    

    Vad är felet snälla hjälp? Eftersom det inte händer något har testat från både Ipad och Mobilen

  19. SvaraLinnea

    Hej! Jag håller på att skapa en ny design och har nu lagt in en panorama header samt försökt anpassa den till alla enheter enligt beskrivningen ovan, dock är min header extremt inzoomad på min iPad och även på min dator (har en 13” Macbook). Det spelar ingen roll vilket procentvärde jag skriver i, det vill bara inte fungera. Vet du vad jag kan ha gjort fel?

    Tack! /Linnea

  20. SvaraLina

    Hej!
    Jag får inte till detta alls, trots att jag har lagt detta som det ska ligga och jag har sökt på nätet i timmar!

    Kan du hjälpa mig?

    1. SvaraFredrik Le Falk

      Hej,

      media queries är ganska svårt, men det finns många bra guider på nätet om du googlar media queries.

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK