Seneste forumindlæg
Køb / Salg
 * Uofficiel Black/White liste V2
Login / opret bruger

Forum \ Programmering og webdesign \ Hjemmeside design

Media queries og mobile devices

Af Gæst blipblop | 12-08-2019 20:08 | 924 visninger | 3 svar, hop til seneste
Hej kloge hoveder, Efter en del soegen forstaar jeg stadig ikke CSS media queries, og hvordan de bruges til at haandtere mobile devices. Jeg har en side, der bestaar af en centreret spalte med en max-width paa 960px, og selve body har min-width 600px. Det fungerer fint med vinduer af forskellig bredde paa PC, men paa mobile devices opfoerer indholdet sig som om, spalten var 960px bred. Spalten fylder (korrekt) hele skaermens bredde, men jeg er interesseret i, at den logiske bredde bliver mindre, saa indholdet bliver stoerre paa skaermen. Jeg taenker, at loesningen er at saette width af body til 600px paa smaa skaerme, men hvordan tjekker jeg bedst, om der er tale om en mobil eller lignende? Test af DPI? Jeg kan se, at max-width-query'en ofte bliver foreslaaet, og jeg har (naivt) forsoegt med @media (max-width: 480px) som i flere eksempler -- i haabet om, at max-width henviser til den foreslaaede bredde -- men det virker ikke, formentligt fordi bredden bliver 960px (og saa scalet til at fylde hele skaermens bredde). Jeg overser sikkert noget aabenlyst, men baer lige over med mig. :) Tak!
--
Gæstebruger, opret dit eget login og få din egen signatur.
#1
Azakiel
Skribent
12-08-2019 20:14

Rapporter til Admin
Smid følgende i din header, så forholder media queries sig lidt nemmere. <meta name="viewport" content="width=device-width, initial-scale=1.0">
--
Veni, Vidi, Vici. dimidium facti qui coepit habet faber est quisque fortunae suae
#2
blipblop
Gæst
14-08-2019 20:08

Rapporter til Admin
Tak, det virkede! Nu loader siden dog zoomet ind som udgangspunkt. Jeg proevede at med foelgende, men det virkede ikke: <meta name="viewport" content="width=device-width, initial-scale=0.5"> (initial-scale=0.5) Nogen ide om hvordan jeg fikser det?
--
Gæstebruger, opret dit eget login og få din egen signatur.
#3
Jepperdepper
Ultra Supporter
14-08-2019 21:56

Rapporter til Admin
#2 Men siden skal vel være "zoomet ind" som udgangspunkt? Altså fylde enhedens bredde. Det er sådan alle websites fungerer. Er der noget specifikt du ønsker at opnå? Hvorfor skal body have en min-width på 600px? I gennemsnit ligger bredden på mobiler omkring 320-380px i bredden. For at lave en responsive side, skal du have en wrapper omkring alt dit indhold. Denne wrapper skal have en max-width på f.eks. 1200px. Når du kun angiver max-width, så kan dit layout skalere lige så langt ned som de enheder dine besøgende bruger. Der er ingen nedre grænse. Sammen med width=device-width i headeren vil du allerede nu have en responsive side (med mindre du har elementer du har givet en statisk bredde i stedet for en relativ bredde i %). Media queries bruger du så til at lave specifikke regler for dit layout baseret på viewports bredde. Det kan f.eks. være, at du har 4 featured blog posts på din forside. På desktop vil du gerne have de står ved siden af hinanden i 4 kolonner, men på mobil er der ikke plads til det. På mobil vil du derfor have, at de vises i 2 kolonner. Koden kunne derfor se således ud (der skal selvfølgelig mere til for at danne et layout): .featured-blog-post { width: 50%; } @media screen and (min-width: 768px) { .featured-blog-post { width: 25%; } } Dvs. når skærmens bredden er minimum 768px (som er et typisk breakpoint hvor desktop starter), ændres dine featured blog posts til at være 25% i bredden i stedet for 50%, hvilket giver et layout med 4 kolonner.
--
Sidst redigeret 14-08-2019 21:58

Opret svar til indlægget: Media queries og mobile devices

Grundet øget spam aktivitet fra udlandet, er det desværre ikke muligt for dig, at oprette svar som gæst.

Hvis du ønsker at deltage i debatten, skal du oprette en brugerprofil.

Opret bruger | Login