Permalänk
Medlem

Mobilanpassa hemsida

Har gjort en väldigt snabb och enkel hemsida åt en vän, var lat och gjorde den utan stilmallar, ansåg inte det vara behövligt då hemsidan enbart har 4 sidor totalt.
Men slog mig plötsligt att den inte är mobilanpassad vilket såklart är ett måste.
Har tyvärr inte kommit så långt i min undervisning att jag hanterar det kapitlet än och jag har försökt på alla sätt och vis att använda meta taggar och @media och allt jag kan komma på. Antingen så skriver jag ut de på fel ställen eller så felformulerar jag på något sätt.

Hur ska jag få hemsidan mobilanpassad på enklaste sätt?
Kan någon förklara?

Permalänk
Medlem

Har du med denna tag i HTML-filen?
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Du måste ju använda CSS om du ska använda media queries.

Permalänk
Medlem

@ChrisDev: Ja den metataggen är med.
CSS skriver jag direkt i style, alltså inte en extern som jag länkar till.
Men får inte till hur jag skriva skriva i själva CSSdelen? Hur och vart formar jag det enklast?

Permalänk
Medlem

@twari:

@media (max-width: 600px) {
klasser/regler....
}

Permalänk
Medlem

Lättast är att låta någon annan lösa det åt dig. Jag kan rekommendera att du kollar in bootstrap.

Permalänk
Permalänk
Medlem

@ChrisDev: När jag skriver det så fungerar det inte.. ingenting ändras när jag kollar via mobilen...

Permalänk
Medlem

@adzer: Försökte mig på boots men känns allt för avancerat för mig att hänga med på för tillfället (framför allt efter ha slitit i ett dygn för att få något att fungera utan resutlat, då försvinner tålamodet haha )

Permalänk
Medlem

Posta koden här, lättare att se vad som kan vara fel då.

Permalänk
Medlem
Skrivet av ChrisDev:

@twari:

@media (max-width: 600px) {
klasser/regler....
}

Vart placerar du det? Jag har provat att lägga det lite var som men trots det så verkar koden komma fram till mindre skärmar..

Permalänk
Medlem

@ChrisDev:

<!DOCTYPE html>
<html lang = "SV">
<head>
<meta charset="UTF-8">
<title> xxx </title>
<meta name="description" content="xxxxxxxx">
<meta name="robots" content="noinde, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {
background-color: white;
margin: auto;
width: 1000px;
padding:5px;
}

#totalbox {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

header {
background-color: #c6ebd9;
font-family: "Times New Roman", Arial;
float: left;
width: 100%;
height: 170px;
text-align: center;
}

aside {
background-color: #d1e0e0;
width: 20%;
height: 550px;
float: left;
}

.round_corner {
border-radius: 100px;
}

section {
background: #d9f2e6;
overflow: scroll;
float: right;
width: 80%;
height:550px;
}

footer {
background-color: #D0F7DD;
height: 30px;
width: 100%;
clear: both;
}

p {
font-family: "Times New Roman", Arial;
}

ul {
margin: 1px;
color: black;
text-decoration: none;
}

#text {
width:80%;
margin: left;
padding: 30px;
}

</style>
</head>

Permalänk
Medlem
Skrivet av ChrisDev:

Posta koden här, lättare att se vad som kan vara fel då.

La upp det här, dock utan någon form av @media nu för har tagit bort det (igen) för att hitta något annat ställe..
XXX är istället för hemsidans text, så inget att bry sig om.

Permalänk
Tangentbordskonnässör

testa släng in detta i din css:

@media screen and (max-width: 480px) { body { background-color: lightgreen; } } @media screen and (max-width: 720px) { body { background-color: yellow; } } @media screen and (max-width: 900px) { body { background-color: brown; } } @media screen and (min-width: 901px) { body { background-color: white; } }

Sen ändrar du storlek på viewporten genom att ta fram dev-tools i webläsaren och justera bredden.

Då borde bakgrunden ändra färger, och du ser därmed att det fungerar. När du vet att storleksanpassningen fungerar kan du börja slänga in justerad css för varje bredd.

Permalänk
Medlem

Länka till en style.css istället för att använda intern/inline CSS.

Det är lika bra att du lär in rätt beteende från början om HTML/CSS är något du ändå har tänkt utbilda dig inom.

Det är faktiskt inte särskilt komplicerat att skapa en egen css-fil som du länkar via link-taggen. Även för en liten statisk webbplats blir det dessutom smidigare så fort du skall göra en ändring. Samtidigt kommer Google tycka mycket bättre om dig om du håller strukturen i HTML-koden separerad från CSS.

Att mobilanpassa en sida handlar faktiskt en hel del om just detta. Du behöver hålla en grundläggande struktur i HTML-delen. Sedan manipulerar du hur koden skall visas i webbläsaren med hjälp av CSS.

Det du behöver läsa på om är "fluid design". Bootstrap är ett exempel på ett framework som gör det mesta av skitgörat åt dig. Men det kan bli för mycket att ta in i början. Dock har de flera exempelsidor och guider som du kan utgå från, beroende på vilket utseende sidan skall ha.

Försök att inte låsa dig vid en specifik design. Idag är det oftast enklare att börja med att utgå från en mobildesign och sedan arbeta sig uppåt, snarare än tvärtom. Minsta gemensamma nämnaren är trots allt den lägsta upplösningen och minsta skärmen.

Permalänk
Medlem

Konkret exempel:

Lägg till denna kod mellan HEAD-taggarna:

<link rel="stylesheet" type="text/css" href="style.css">

Skapa sedan en textfil i valfri editor, t.ex. Notepad++, Atom, Anteckningar. Denna textfil sparar du i samma mapp som HTML-filen och döper till "style.css". OBS - viktigt att filändelsen blir .css och inte .txt, annars kommer det inte fungera.

När du sedan redigerar style.css kan du lägga till all CSS-kod här istället. Exempelvis kan du pröva att lägga till CSS-exemplet som @huttala inkluderade i sitt inlägg ovan.

Även om du sitter på en dator och testar så kan du förminska webbläsarfönstret. Då ser du att bakgrunden ändrar sig vid vissa intervall, som är anpassade för att få plats på flera vanligt förekommande skärmstorlekar.

Permalänk
Skrivet av serdyllon:

Länka till en style.css istället för att använda intern/inline CSS.

Det är lika bra att du lär in rätt beteende från början om HTML/CSS är något du ändå har tänkt utbilda dig inom.

Det är faktiskt inte särskilt komplicerat att skapa en egen css-fil som du länkar via link-taggen. Även för en liten statisk webbplats blir det dessutom smidigare så fort du skall göra en ändring. Samtidigt kommer Google tycka mycket bättre om dig om du håller strukturen i HTML-koden separerad från CSS.

Håller helt med, blir i slutändan så mycket enklare att jobba om du (TS) delar upp din kod. Även om det i det här fallet inte rör sig om särskilt mycket kommer det förr eller senare att märkas, trust me, det blir alltid superrörigt. Bättre då att dela upp i små men flera filer, översikten och tänkandet blir enormt mycket enklare, även om det inte verkar så först!

Permalänk
Medlem
Skrivet av huttala:

testa släng in detta i din css:

@media screen and (max-width: 480px) { body { background-color: lightgreen; } } @media screen and (max-width: 720px) { body { background-color: yellow; } } @media screen and (max-width: 900px) { body { background-color: brown; } } @media screen and (min-width: 901px) { body { background-color: white; } }

Sen ändrar du storlek på viewporten genom att ta fram dev-tools i webläsaren och justera bredden.

Då borde bakgrunden ändra färger, och du ser därmed att det fungerar. När du vet att storleksanpassningen fungerar kan du börja slänga in justerad css för varje bredd.

Tusen tack för hjälp
Har lagt in och när jag kollar i developern så blir det en röd/brun bakgrund. Men ingenting påverkas eller ändras av att jag ändrar i storlekarna på skärmen. Den fortsätter ha en röd/brun bakgrund och opassande storlek... :S

Permalänk
Medlem

@twari:
Jag tror hans poäng var att du skulle se ifall det fungerade över huvud taget.
Du får ju ändra reglerna för de olika elementen.
Om en div är 50% bred på en dator så kanske man vill ha den 80% bred på en mobil, då får man lägga till den regeln i media-koden helt enkelt.

Permalänk
Medlem
Skrivet av TwentyØnePenguins:

Håller helt med, blir i slutändan så mycket enklare att jobba om du (TS) delar upp din kod. Även om det i det här fallet inte rör sig om särskilt mycket kommer det förr eller senare att märkas, trust me, det blir alltid superrörigt. Bättre då att dela upp i små men flera filer, översikten och tänkandet blir enormt mycket enklare, även om det inte verkar så först!

Alltså ja, tack ni har rätt. Jag vet att man ska göra stilmall och bla bla bla.. Jag började det hela med en stilmall för längesedan. Sedan har den använts till att "träna" vidare längst med olika uppgifter jag haft. Så stilmallen var inte "up to date" så slutade med att jag för enkelhetens skulle plockade bort den och arbetade utifrån en intern mall istället. Jag VET att det inte är optimalt eller bästa sättet att göra det. Och i framtiden lovar jag er alla att jag ska arbeta på annat sätt. Men nu sitter jag här med en färdig hemsida som jag bara vill lämna ifrån mig så jag slipper tänka på det mer. Jag vill börja med nya uppgiften, där jag "börjar om på noll" och kan rätta "rätt".

Men det jag behöver just nu, är att få en lösning på att få till en någerlunda mobilanpassning på sidan. Det behöver inte vara det snyggaste eller renaste sättet i kodningen, jag vill bara gå vidare med livet, ungefär.

Permalänk
Medlem

Personligen tycker jag det är mycket lättare att jobba med min-width istället för max-width. Det betyder att du först designar för hur det ska se ut i mobilen (mobile-first).

Sen kan du med dessa brytpunkter bestämma hur det ska se ut i tablet, respektive desktop.

Dessa är de vanligaste breakpointsen (saxat från bootstrap).
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Ett exempel som gör att du kan testa detta är t.ex.

body {
background: lightcoral;
}

@media (min-width: 768px) {
body {
background: rebeccapurple;
}
}

@media (min-width: 768px) {
body {
background: lavender;
}
}

Testa dedär och dra i browserfönstret så borde du se hur de olika färgerna appliceras vid de olika brytpunkterna.

Permalänk
Medlem
Skrivet av twari:

Alltså ja, tack ni har rätt. Jag vet att man ska göra stilmall och bla bla bla.. Jag började det hela med en stilmall för längesedan. Sedan har den använts till att "träna" vidare längst med olika uppgifter jag haft. Så stilmallen var inte "up to date" så slutade med att jag för enkelhetens skulle plockade bort den och arbetade utifrån en intern mall istället. Jag VET att det inte är optimalt eller bästa sättet att göra det. Och i framtiden lovar jag er alla att jag ska arbeta på annat sätt. Men nu sitter jag här med en färdig hemsida som jag bara vill lämna ifrån mig så jag slipper tänka på det mer. Jag vill börja med nya uppgiften, där jag "börjar om på noll" och kan rätta "rätt".

Men det jag behöver just nu, är att få en lösning på att få till en någerlunda mobilanpassning på sidan. Det behöver inte vara det snyggaste eller renaste sättet i kodningen, jag vill bara gå vidare med livet, ungefär.

Väldigt svårt att veta vad som behöver ändras utan att se själva sidan.

Permalänk
Medlem

@twari: Du behöver skapa en extern CSS fil, det är det mest grundläggande du kan göra - så om det känns för tufft så bör du gå tillbaka några steg och lära dig saker och ting i rätt ordning. Det du håller på med nu kommer aldrig bli bra om du inte gör det på rätt sätt.

Att mobilanpassa en webbplats är inget du snyter ur näsan om du inte har bra koll på vad du gör, så se till att läs på och studera.

Permalänk
Skrivet av twari:

Alltså ja, tack ni har rätt. Jag vet att man ska göra stilmall och bla bla bla.. Jag började det hela med en stilmall för längesedan. Sedan har den använts till att "träna" vidare längst med olika uppgifter jag haft. Så stilmallen var inte "up to date" så slutade med att jag för enkelhetens skulle plockade bort den och arbetade utifrån en intern mall istället. Jag VET att det inte är optimalt eller bästa sättet att göra det. Och i framtiden lovar jag er alla att jag ska arbeta på annat sätt. Men nu sitter jag här med en färdig hemsida som jag bara vill lämna ifrån mig så jag slipper tänka på det mer. Jag vill börja med nya uppgiften, där jag "börjar om på noll" och kan rätta "rätt".

Men det jag behöver just nu, är att få en lösning på att få till en någerlunda mobilanpassning på sidan. Det behöver inte vara det snyggaste eller renaste sättet i kodningen, jag vill bara gå vidare med livet, ungefär.

Sälvklart får du koda hur du vill, du bestämmer
Men OnT, om du fick det att fungera med bakgrundsfärgerna i ChrisGBG's exempel är väl nästa steg att skala ner ditt webläsarfönster till "mobilstorlek", kolla vad som behöver ändras och skriva in det i @media-query't.

Permalänk
Tangentbordskonnässör
Skrivet av twari:

Tusen tack för hjälp
Har lagt in och när jag kollar i developern så blir det en röd/brun bakgrund. Men ingenting påverkas eller ändras av att jag ändrar i storlekarna på skärmen. Den fortsätter ha en röd/brun bakgrund och opassande storlek... :S

My bad.

@media screen and (max-width: 480px) { body { background-color: lightgreen; } } @media screen and (max-width: 720px) and (min-width: 481px) { body { background-color: yellow; } } @media screen and (max-width: 900px) and (min-width: 721px) { body { background-color: brown; } }

Har ingen editor framför mig just nu, men nu borde det bli rätt. Den bakgrund du har satt som standard längst upp i din css är den som kommer bli när du går över 900px

Permalänk
Medlem
Skrivet av huttala:

My bad.

@media screen and (max-width: 480px) { body { background-color: lightgreen; } } @media screen and (max-width: 720px) and (min-width: 481px) { body { background-color: yellow; } } @media screen and (max-width: 900px) and (min-width: 721px) { body { background-color: brown; } }

Har ingen editor framför mig just nu, men nu borde det bli rätt. Den bakgrund du har satt som standard längst upp i din css är den som kommer bli när du går över 900px

Oh nu fungerade det, nu ändras färgerna med när jag drar. Tusen tack. Nu kan jag nog knappa ihop något med det. Tusen tack för hjälpen!

Permalänk
Tangentbordskonnässör
Skrivet av twari:

Oh nu fungerade det, nu ändras färgerna med när jag drar. Tusen tack. Nu kan jag nog knappa ihop något med det. Tusen tack för hjälpen!

När du är klar med det vill jag se att du gör det alla andra skrivit också, sådär ska det inte se ut i en HTML-fil.
Sen ska det redovisas när det är klart! Så uppdatera gärna tråden när du har något vettigt att visa upp.

Kör hårt!

PS. antalet pixlar i bredd är bara draget ur arslet från min sida. Kolla vad som är standardbredder för olika enheter och anpassa efter det. Själv har jag alltid kört utefter bootstraps-standard (som jag tror någon ovan skrev ner).

Permalänk
Medlem
Skrivet av huttala:

När du är klar med det vill jag se att du gör det alla andra skrivit också, sådär ska det inte se ut i en HTML-fil.
Sen ska det redovisas när det är klart! Så uppdatera gärna tråden när du har något vettigt att visa upp.

Kör hårt!

PS. antalet pixlar i bredd är bara draget ur arslet från min sida. Kolla vad som är standardbredder för olika enheter och anpassa efter det. Själv har jag alltid kört utefter bootstraps-standard (som jag tror någon ovan skrev ner).

Varför köra med pixlar?
Är ingen CSS-expert och jag körde alltid med pixlar när jag var helt färsk.
Nu kör jag procent istället, med pixlar blir det väl mer hårdkodat?
På font-size och padding kör jag ofta med em.

Permalänk
Tangentbordskonnässör
Skrivet av ChrisDev:

Varför köra med pixlar?
Är ingen CSS-expert och jag körde alltid med pixlar när jag var helt färsk.
Nu kör jag procent istället, med pixlar blir det väl mer hårdkodat?
På font-size och padding kör jag ofta med em.

I detta fall är det ju skärmens bredd du vill ha reda på, och sedan anpassa efter.
Då är det pixlar som gäller. En skärm som rapporterar att den har 600px bredd kommer således få CSSen som är anpassad efter det.
Sedan om man använder tex font-size i em eller px innuti detta är en annan sak.

Om du skulle anpassa efter procent så blir det ju väldigt konstigt då 100% av 600 pixlar blir samma sak som 100% av 2560 pixlar.

Permalänk
Medlem
Skrivet av huttala:

I detta fall är det ju skärmens bredd du vill ha reda på, och sedan anpassa efter.
Då är det pixlar som gäller. En skärm som rapporterar att den har 600px bredd kommer således få CSSen som är anpassad efter det.
Sedan om man använder tex font-size i em eller px innuti detta är en annan sak.

Om du skulle anpassa efter procent så blir det ju väldigt konstigt då 100% av 600 pixlar blir samma sak som 100% av 2560 pixlar.

Never mind.
Jag tänkte på något annat och jag har alltid pixlar i media queries
Menade att jag körde pixlar på allting i början, som divs osv.

Permalänk
Medlem
Skrivet av huttala:

I detta fall är det ju skärmens bredd du vill ha reda på, och sedan anpassa efter.
Då är det pixlar som gäller. En skärm som rapporterar att den har 600px bredd kommer således få CSSen som är anpassad efter det.
Sedan om man använder tex font-size i em eller px innuti detta är en annan sak.

Om du skulle anpassa efter procent så blir det ju väldigt konstigt då 100% av 600 pixlar blir samma sak som 100% av 2560 pixlar.

Skrivet av ChrisDev:

Never mind.
Jag tänkte på något annat och jag har alltid pixlar i media queries
Menade att jag körde pixlar på allting i början, som divs osv.

Jag har funderat väldigt länge på hur man skriver optimal css och vad jag har klamrat mig fast vid numera är designsystem. Istället för att använda px/em/rem/% etc så använder man rytmenheter. Detta är dock kanske lite överkurs för denna tråd