media queries

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:
media queries

Indlæg af cristian » 4. nov 2013, 17:27

Så på http://www.mnrb.dk har jeg tilføjet nogle media queries, for at rette siden til i forskellige opløsninger.

I første omgang har jeg rettet siden til når den vises i følgende opløsninger (width).
1366px
1280px
1024px

Og som default er siden lavet i 1920px.

I forhold til min margin og størrelse på billeder mm.

Og så tænkte jeg over. Giver den den helt store mening at begynde og lave så siden stadig ser "godt" ud hvis man begynder at skifte størrelsen
på sin browser ved at trække i siderne. Hvor mange brugere gør i virkeligheden det?

Personligt kender jeg ikke nogle eller gør det selv.
Så er det spild af tid og begynde på eller?

Hvad er jeres mening?

Tak på forhånd.

Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:

Re: media queries

Indlæg af scootergrisen » 4. nov 2013, 19:50

Hvad mener du med og trække i siderne ?
Det er nok ikke nødvendigt og lave media queries for opløsninger der ligger så tæt op af hinanden som du har valgt.

Min skærm er 1366 bred også bruger jeg de her på min side fordi det passer til at teste på min telefon.

Kode: Vælg alt

@media
screen and (max-device-width: 960px),
screen and (max-width: 960px) {

@media
screen and (max-device-width: 540px),
screen and (max-width: 540px) {
Læg mærke til der står max-width og ikke width som i din kode.
Når du skriver (width: 1280px) så gælder den CSS kode kun når der lige præcist er 1280 pixels.
I Firefox kan du trykke Ctrl+Shift+M så kan du vælge forskellige størrelsen og teste med uden du skal justere vinduet.

Din div.siteWrapper er desuden sat til 100% også har den en border på 1 pixels så der kommer vandret scrollbar.
Også er dine billeder unødigt store. Løver er 1600x1200 og lysne er 1920x1080. Det tager unødigt lang tid og hente.
Hvis du laver din side til mobileenheder så har det betydning både fordi forbindelsen ikke er så hurtig men også fordi folk betaler per MB.

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: media queries

Indlæg af Daniel » 4. nov 2013, 20:09

Spørgsmålet er hvad du gerne vil opnå i sidste ende Mobile Design, Adaptive Design eller Responsive Design.
Hvis det du gerne vil opnå er at folk kan bruge hjemmesiden nemt på mobiler, så er det Mobile Design du skal tænke på.
Hvis du går ud fra forskellige enheder, mobiler, tablets, computer, osv., og ikke laver alle størrelserne, så er det Adaptive Design.
Det du snakker om med at trække ind og så tilpasse efter hvornår noget begynder ikke længere at se pænt ud, så er det Responsive Design.

De fleste mener at Responsive Design og Adaptive Design er det samme, men er ikke helt enig i det, og alt efter hvilke brugere hjemmesiden har, så ville jeg vælge hvilken metode jeg ville bruge.

MrLundholm
Rutineret
Rutineret
Indlæg:50
Tilmeldt:20. sep 2013, 15:33
Kontakt:

Re: media queries

Indlæg af MrLundholm » 4. nov 2013, 21:13

Den bedste løsning med mobiler sider er altid Responsivt, da du kun behøver at ændre indholdet ét sted (medmindre du bruger database forbindelse til ALT indhold, hvis de fleste ikke gør).
Det giver heller ingen mening at bruge media quieries til så små forskelle på størrelserne. Som andre tidligere har nævnt så skal du bruge dem til mobil, tablet osv.

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: media queries

Indlæg af cristian » 4. nov 2013, 21:50

Firefox kan du trykke Ctrl+Shift+M så kan du vælge forskellige størrelsen og teste med uden du skal justere vinduet.
Smart. Er det muligt at få flere værdier at vælge imellem eller selv angive bredde og højde som en custom værdi?
Når du skriver (width: 1280px) så gælder den CSS kode kun når der lige præcist er 1280 pixels.
Det jeg klar over :) Sammen med max-width (op til) og min-width (fra).

Og for en range.

Kode: Vælg alt

@media (max-width:900px) and (min-width:400px) {
Jeg valgte
1366px
1280px
1024px

Da statistikker jeg fandt for de mest brugte opløsninger viste overstående.
Dog tvivler jeg på at brugere ændre deres browser vindue i størrelsen ved at hive i siderne, de fleste enten lukker eller minimerer vinduet.

"problemet" er at man tydelig kan se at når man ændre bredden på sin browser uden for overstående + 1920px værdierne.
Så bliver billederne ser hurtigt "forkerte" ud, og video elementet bliver mindre end billederne.

Men om det er det værd at ændre så lige meget om du hiver i siderne så passer tingene hele vejen igennem er et godt spørgsmål, fordi nogle enkelte måske ændre deres browser vindue fra fuld skærm.
Også er dine billeder unødigt store. Løver er 1600x1200 og lysne er 1920x1080. Det tager unødigt lang tid og hente.
De er test billeder smækket på direkte fra bing :) Fremtidige billeder kommer til at passe i størrelsen, så de er hurtigere at hente.
Spørgsmålet er hvad du gerne vil opnå i sidste ende Mobile Design, Adaptive Design eller Responsive Design.
Hvis det du gerne vil opnå er at folk kan bruge hjemmesiden nemt på mobiler, så er det Mobile Design du skal tænke på.
Hvis du går ud fra forskellige enheder, mobiler, tablets, computer, osv., og ikke laver alle størrelserne, så er det Adaptive Design.
Det du snakker om med at trække ind og så tilpasse efter hvornår noget begynder ikke længere at se pænt ud, så er det Responsive Design.
Der er ingen sidste ende i øjeblikket. Lige her og nu skal siden bare kunne tilpasses de mest almindelige opløsninger på PC'er :)

Keep the good feedback comming :)

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: media queries

Indlæg af Daniel » 4. nov 2013, 22:11

cristian skrev:Der er ingen sidste ende i øjeblikket. Lige her og nu skal siden bare kunne tilpasses de mest almindelige opløsninger på PC'er :)
Så ville jeg nok vælge at lave et adaptive design, som er det du er i gang med nu, hvor du tilpasser siden til de mest brugte størrelser.
Dette betyder at der er nogle der kan opleve nogle fejl, men det er nok meget få i forholdt til hvis du slet ikke tænkte på skærmstørrelserne. ;)

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: media queries

Indlæg af cristian » 4. nov 2013, 22:14

Danielh007 skrev:
cristian skrev:Der er ingen sidste ende i øjeblikket. Lige her og nu skal siden bare kunne tilpasses de mest almindelige opløsninger på PC'er :)
Så ville jeg nok vælge at lave et adaptive design, som er det du er i gang med nu, hvor du tilpasser siden til de mest brugte størrelser.
Dette betyder at der er nogle der kan opleve nogle fejl, men det er nok meget få i forholdt til hvis du slet ikke tænkte på skærmstørrelserne. ;)
Det er jo det :)
Er der en måde at registrer de besøgende man får til en side, med hensyn til deres opløsning.
Så man kan sige 50% bruger 1920px 20% bruger 1366 o.s.v.

Er det sådan noget google analytics kan, eller et andet smart værktøj.

Så man i fremtiden bedre kan tilpasse sin side (ikke nødvendigvis denne jeg tænker) bedre til sit "publikum".

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: media queries

Indlæg af Daniel » 4. nov 2013, 22:52

cristian skrev:Er der en måde at registrer de besøgende man får til en side, med hensyn til deres opløsning.
Du kan med JavaScript finde størrelsen på en brugers skærm, så det kan du sende videre til PHP, som så vil gemme resultaterne i en database.
Men for at det virker, så skal du vist sætte noget cookie op, så det kun er første gang at brugeren besøger siden at du får data ind i databasen.

Kode: Vælg alt

var screenWidth = screen.width;
var screenHeight = screen.height;
Ovenstående giver brugerens skærmstørrelse, det er dog ikke browserens størrelse, hvis du hellere vil have den, så kan du få det via jQuery.
Hvordan selve systemet så skal bygges op, har jeg ikke tid til at tænke over lige nu, men du er jo også god til at bygge videre på selv den mindste hjælp. :D

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: media queries

Indlæg af cristian » 4. nov 2013, 23:11

bomb bomb
har jeg ikke tid til at tænke over lige nu
Har man lidt små travlt ,)?
men du er jo også god til at bygge videre på selv den mindste hjælp
:oops: :lol:

Har bestilt en JavaScript bog, så når den dukker op må jeg jo lige finde ud af det ,)

Databasen er nem nok, og så må jeg lige finde ud af hvordan PHP's connection streng til DB'en er når den tid er.

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: media queries

Indlæg af Daniel » 4. nov 2013, 23:50

cristian skrev:Har man lidt små travlt ,)?
Ja tingene går lige lidt hurtigt engang imellem. ;)
cristian skrev:Har bestilt en JavaScript bog, så når den dukker op må jeg jo lige finde ud af det ,)
Lyder spændende med sådan en bog, går ud fra det er den du anbefalede i et andet emne den anden dag? :D

MrLundholm
Rutineret
Rutineret
Indlæg:50
Tilmeldt:20. sep 2013, 15:33
Kontakt:

Re: media queries

Indlæg af MrLundholm » 5. nov 2013, 12:19

Danielh007 skrev: Men for at det virker, så skal du vist sætte noget cookie op, så det kun er første gang at brugeren besøger siden at du får data ind i databasen.
Og hvis du gør dette, så skal du huske den forbandede cookie-lov!

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: media queries

Indlæg af cristian » 5. nov 2013, 12:20

går ud fra det er den du anbefalede i et andet emne den anden dag?
Det er det :) Har snart et mindre bibliotek indenfor alle mulige områder O.o
Men har haft rigtig gode erfaringer med udgiverne af en tidligere bog, så nu tager jeg samme udgivere bare med javascript og håber det er lige så godt.
Og så 700 sider senere har jeg forhåbentlig en bedre forståelse af javascript hvad det kan og ikke kan med mere :)

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: media queries

Indlæg af Daniel » 5. nov 2013, 12:30

cristian skrev:Og så 700 sider senere har jeg forhåbentlig en bedre forståelse af javascript hvad det kan og ikke kan med mere :)
Jeg ved en ting det kan...
...forvirre mig! :D

Besvar