Avatar billede tinem Novice
03. november 2018 - 13:15 Der er 6 kommentarer

Hjælp til responsive text

Jeg har lavet nedenstående 4 sider, som "bare" skal vise en enkelt side og virkelig brugt lang tid og har også fået både YouTube og Vimeo samt image til at scalere, men kan ikke inde ud af texten, men måske er den OK? Håber nogen kan hjælpe.
OG ja jeg ved godt der er alt for meget text på siderne, men det er ikke lige det problemet drejer sig om nu. Det er MANGE år siden, jeg har arbejdet med CSS.

Det skal se godt ud på både Desktop, Tablet og Smartphone

Helst bare v.hja. CSS og ikke en masse Javascript.

http://findtoilet.dk/
http://findtoilet.dk/apps/
http://tinemuller.dk/findtoilet/brugstedet/
http://tinemuller.dk/gis-afdelinger/
Avatar billede Slater Ekspert
03. november 2018 - 13:20 #1
Tekst er automatisk responsivt, med mindre du aktivt gør noget for at det ikke skal være det.
De sider virker fint allerede, helt ned til 320px bredde. Jeg kan ikke se noget problem.
Avatar billede tinem Novice
03. november 2018 - 16:10 #2
Tak for svar. Synes teksten er lidt for lille hvis du tester Ipad Pro via http://responsivedesignchecker.com/
Avatar billede Slater Ekspert
03. november 2018 - 16:53 #3
Teksten er ret lille generelt - den kunne sagtens sættes nogle størrelser i vejret. Jeg kan ikke lige se det skulle være et særligt problem på en iPad Pro, men du kan også sætte skriftstørrelsen lidt op for tablet-opløsninger alene med @media queries.

Der findes dog ingen nøjagtig standard eller konsensus for hvad der udgør en tablet-opløsning. Et godt sted at starte er mellem 640 og 1024 px bredde.
Det vil gøres med

@media (min-width: 640px) and (max-width: 1024px) {
    body {
        font-size: /* hvad den nu skal være */;
    }
}
Avatar billede claes57 Ekspert
03. november 2018 - 19:06 #4
der går kage i det, hvis man vælger tegnstørrelse efter px - min telefon 5,2 tommer har full-hd opløsning ligesom min pc-skærm på 23,8 tommer.
Avatar billede tinem Novice
03. november 2018 - 19:28 #5
Er det så OK det som jeg selv bruger?

h5{
    max-width:640px;
    margin:auto;
    font-weight: normal;
    font-size: 1em;
}

eller hvad med det de kalder "viewport"?
Avatar billede Slater Ekspert
03. november 2018 - 21:08 #6
#4: Men din telefon har sandsynligvis 3-4 fysiske pixels per CSS-pixel.

Det er ikke et problem at bruge px til skriftstørrelser. Det var det for ti år siden i forbindelse med zoom, dengang browsere kun skalerede tekst når man zoomede - men nu skaleres hele siden, og px er blevet helt fint at bruge igen.


#5: Max-width på et element er slet ikke det samme som i en @media query, hvis det er det du mener. Men der er ikke noget galt i det der, nej.

Og ja, de fleste responsive sider bør have
<meta name="viewport" content="initial-scale=1.0">
stående i <head> sektionen, netop for at sørge for at elementer ikke bliver meget små på mobiler og tablets, men det er ikke kun relevant for tekst, og bør ikke gøre den store forskel lige i dette tilfælde, så vidt jeg ved, da bredden af siden allerede er meget begrænset.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester