CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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/

Synes godt om

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.

Synes godt om

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/

Synes godt om

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 */;
}
}

Synes godt om

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.

Synes godt om

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"?

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS